你能帮我解决这个问题吗?我在 bootstrap 4 内有一个 input-group . 在输入组中我有 2 inputs ,首先是prepend,而seccond是append . 所以,它包含在 col-12 的 col-12 div中,我需要 set width 的 only first input 到某个值,而 seccond 也需要一些值,但是 diferent . 我试过设置 width in my custom css ,但没有结果 . 可能吗?我知道,我可以通过用另一个col包装它在div中来解决它,但是我有 both input below 和 not 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 回答
我找到了解决方案 . 我尝试设置max-width而不是宽度,它可以工作 . 对于上面的例子,它将是:
我在互联网上找到了一个解决方案,您可以访问codeply!
它非常简洁 . 为此,您只需将以下
CSS
添加到样式表即可 .要设置
input-group-text
的宽度,只需更改input-group
的flex
的值,例如,如上所示30%
的总宽度 .感谢上面链接的作者提供的这个简单的代码片段 .
干杯,