Bootstrap 4.0 input-group-append 和 prepend 显示错误的高度
Jua*_*gal 5 html css twitter-bootstrap bootstrap-4
我正在使用Bootstrap 4，但遇到了无法解决的问题。在input-group-append和input-group-prepend增加他们的高度尺寸时，屏幕的分辨率降低。您可以在下一个动画中检查问题gif：
我已经阅读了input-group文档，但我没有发现我当前的代码有任何问题，显示在下一个片段中：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<hr/>
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
<div class="row">
<div class="input-group input-group-sm mb-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="input-group-prepend">
<span class="input-group-text" id="testPot">Potencia</span>
</div>
<select class="custom-select custom-select-sm">
<option value="value">text</option>
</select>
</div>
<div class="input-group input-group-sm mb-3 col-xl col-lg col-md col-sm col">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">KVA</span>
</div>
</div>
<div class="input-group input-group-sm col-xl col-lg col-md col-sm col mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Y</span>
</div>
<input type="text" class="form-control" name="name" value=""/>
<div class="input-group-append">
<span class="input-group-text">KVA</span>
</div>
</div>
</div>
</div>
</div>
<hr/>这也是我记录 gif的codepen 链接，以防您需要其他来源来重现该问题。
我做错了什么还是引导问题？我该如何解决？
谢谢！
我认为你的问题是列内元素的宽度不适合它们，所以它们会在多行上中断。如果您添加一些边界类，您会注意到这一点。检查下一个示例，其中我减少了原始方法所需的类（显示问题）：
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<hr/>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div class="row">
<div class="input-group input-group-sm mb-3 col-md-6 border border-danger">
<div class="input-group-prepend">
<span class="input-group-text" id="testPot">Potencia</span>
</div>
<select class="custom-select custom-select-sm form-control">
<option value="value">text</option>
</select>
</div>
<div class="input-group input-group-sm mb-3 col border border-info">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">KVA</span>
</div>
</div>
<div class="input-group input-group-sm mb-3 col border border-danger">
<div class="input-group-prepend">
<span class="input-group-text">Y</span>
</div>
<input type="text" class="form-control" name="name" value="" />
<div class="input-group-append">
<span class="input-group-text">KVA</span>
</div>
</div>
</div>
</div>
</div>
</div>
<hr/>现在，由于您将所有输入包装在 a 内，col-4并且是1/3屏幕宽度的（因为网格系统有 12 列），所以我认为您能做的最好的事情就是将它们全部放在col-12包装器上并将它们分成多行，或者也可以，增加主包装的尺寸。检查接下来的两个示例，显示这两种方法：
示例 1：col-12包装器上的输入组
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<hr/>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div class="row">
<div class="input-group input-group-sm mb-3 col-12 border border-danger">
<div class="input-group-prepend">
<span class="input-group-text" id="testPot">Potencia</span>
</div>
<select class="custom-select custom-select-sm form-control">
<option value="value">text</option>
</select>
</div>
<div class="input-group input-group-sm mb-3 col-12 border border-info">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">KVA</span>
</div>
</div>
<div class="input-group input-group-sm mb-3 col-12 border border-danger">
<div class="input-group-prepend">
<span class="input-group-text">Y</span>
</div>
<input type="text" class="form-control" name="name" value="" />
<div class="input-group-append">
<span class="input-group-text">KVA</span>
</div>
</div>
</div>
</div>
</div>
</div>
<hr/>示例 2：增加主包装宽度
在下一个示例中，我col-8在主包装器上使用，但您可以尝试使用其他尺寸的列。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<hr/>
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="row">
<div class="input-group input-group-sm mb-3 col-md-6 border border-danger">
<div class="input-group-prepend">
<span class="input-group-text" id="testPot">Potencia</span>
</div>
<select class="custom-select custom-select-sm form-control">
<option value="value">text</option>
</select>
</div>
<div class="input-group input-group-sm mb-3 col border border-info">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">KVA</span>
</div>
</div>
<div class="input-group input-group-sm mb-3 col border border-danger">
<div class="input-group-prepend">
<span class="input-group-text">Y</span>
</div>
<input type="text" class="form-control" name="name" value="" />
<div class="input-group-append">
<span class="input-group-text">KVA</span>
</div>
</div>
</div>
</div>
</div>
</div>
<hr/>