Bootstrap 4 设置输入组输入的宽度答案

【问题标题】：Bootstrap 4 set a width of input-group inputsBootstrap 4 设置输入组输入的宽度
【发布时间】：2018-08-26 04:34:17
【问题描述】：

你能帮我解决这个问题吗？我在 bootstrap 4 中有一个 input-group。在我的input-group 中，我有 2 个输入，第一个是前置，第二个是附加。

它包含在form-group 中的col-12 div 中，我需要将第一个输入的width 设置为某个特定（但不同）的值。我试图在我的自定义 css 中设置 width，但没有成功。可能吗？我知道，我可以通过将它与另一个 col 包装在一个 div 中来设置它，但是我在下面而不是并排输入。

代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 <div class="form-group">
    <label for="telephone">Telephone</label>
      <div class="row">
         <div class="col-12">
            <div class="input-group telephone-input">
              <div class="input-group-prepend preselection-prepend">
                  <div class="input-group-text">+</div>
              </div>
              <input class="form-control" id="preselection" type="text" maxlength="3" name="preselection" placeholder="Preselection" autocomplete="off" required>
              <input class="form-control" id="telephone" placeholder="Telephone number" type="tel" maxlength="11" name="telephone" autocomplete="off" required>
              <span class="placeholder" id="tele-holder"></span>
              <div class="input-group-append" id="preselectionToggle">
              <div class="input-group-text">
                 <i class="far fa-plus-square"></i>
              </div>
            </div>
          </div>
       </div>
     </div>
  </div>
    
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

【问题讨论】：

您尝试设置什么宽度？ “一些价值观”到底是什么？将它们包装在列中应该使它们并排。正如Bootstrap 4 docs 中所解释的，有几种不同的方法可以对齐表单输入。如果您想并排对齐输入，您应该将它们包装在列中。
是的，但正如我所描述的，我希望首先输入，例如，80px 宽度和第二个 150px 宽度，因为对于电话预选，我只需要最多 3 个数字的宽度。

标签： html css position bootstrap-4

【解决方案1】：

您可以使用 w-50 和 w-100 类来做到这一点

喜欢这个

<div class="input-group">
   <div class="input-group-prepend w-50">
     <span class="input-group-text w-100">label</span>
   </div>
   <input type="text" class="form-control " />
</div>

【讨论】：

【解决方案2】：

我在互联网上找到了一个解决方案，您可以通过codeply! 访问它。

它非常整洁和简单。为此，您只需将以下CSS 添加到您的样式表中。

.input-group>.input-group-prepend {
    flex: 0 0 30%;
}
.input-group .input-group-text {
    width: 100%;
}

要设置input-group-text的宽度，只需改变input-group的flex的值，例如上图30%的总宽度。

感谢上面链接的作者提供这个简单的代码sn-p。

【讨论】：

【解决方案3】：

我找到了解决方案。我尝试设置 max-width 而不是仅设置宽度，它可以工作。对于上面的示例，它将是：

#preselection {
  max-width: 15%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 <div class="form-group">
    <label for="telephone">Telephone</label>
      <div class="row">
         <div class="col-12">
            <div class="input-group telephone-input">
              <div class="input-group-prepend preselection-prepend">
                  <div class="input-group-text">+</div>
              </div>
              <input class="form-control" id="preselection" type="text" maxlength="3" name="preselection" placeholder="Preselection" autocomplete="off" required>
              <input class="form-control" id="telephone" placeholder="Telephone number" type="tel" maxlength="11" name="telephone" autocomplete="off" required>
              <span class="placeholder" id="tele-holder"></span>
              <div class="input-group-append" id="preselectionToggle">
              <div class="input-group-text">
                 <i class="far fa-plus-square"></i>
              </div>
            </div>
          </div>
       </div>
     </div>
  </div>
    
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

【讨论】：