Bootstrap 4设置input-group输入框的宽度

Question

你能帮我解决这个问题吗？我在 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>   

- Ondřej Javorský

---

你尝试过设置宽度吗？"一些值"具体指什么？将它们包裹在列中应该可以使它们并排。正如Bootstrap 4文档所解释的那样，有几种不同的方法来对齐表单输入。如果你想要将输入并排对齐，你应该将它们包裹在列中。 - Carol Skelly

是的，但我想按照我描述的方式进行设置，例如，第一个输入框宽度为80像素，第二个输入框宽度为150像素，因为对于电话预选，我只需要最多3个数字的宽度。 - Ondřej Javorský

Answer 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>

- ashkufaraz

Answer 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％。

感谢以上链接的作者提供了这个简单的代码片段。

- vchar

Answer 3

我找到了一个解决方案。我尝试设置最大宽度而不仅仅是宽度，它起作用了。 对于上面的例子，应该这样写：

#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>

- Ondřej Javorský