Question

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

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

代码：

width

Answer 1

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

这非常简洁明了。为此，您只需要在样式表中添加以下CSS。

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

要设置input-group-text的宽度，只需更改flex的{{1}}的值即可，例如，如总宽度的input-group所示。

感谢上面的链接的作者提供此简单的代码段。

Answer 2

我找到了解决方案。我尝试设置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>

Answer 3

您可以使用课程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>

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

3 个答案: