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

你能帮我解决这个问题吗?我在 bootstrap 4 内有一个 input-group . 在输入组中我有 2 inputs ,首先是prepend,而seccond是append . 所以,它包含在 col-12col-12 div中,我需要 set widthonly first input 到某个值,而 seccond 也需要一些值,但是 diferent . 我试过设置 width in my custom css ,但没有结果 . 可能吗?我知道,我可以通过用另一个col包装它在div中来解决它,但是我有 both input belownot side by side .

码:

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

回答(2)

2 years ago

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

2 years ago

我在互联网上找到了一个解决方案,您可以访问codeply

它非常简洁 . 为此,您只需将以下 CSS 添加到样式表即可 .

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

要设置 input-group-text 的宽度,只需更改 input-groupflex 的值,例如,如上所示 30% 的总宽度 .

感谢上面链接的作者提供的这个简单的代码片段 .

干杯,