我正在尝试为电话输入创建一个 Bootstrap 网格内网格。这个想法是电话号码有一个标签，并且在较小的分辨率下“标签”和“电话组”将堆叠是可以接受的。但是，我不希望 3 个电话输入堆叠 - 我想让它们保持内联，但我不确定在这种情况下如何使用内联类。
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-row">
<div class="col-md-5">
<label for="ph1">Label</label>
<input type="text" class="form-control" id="label">
</div>
<div class="col-md-5">
<div class="form-inline">
<div class="col-md-3">
<label for="ph1">Country</label>
<input type="text" class="form-control" id="ph1">
</div>
<div class="col-md-3">
<label for="ph2">Area</label>
<input type="text" class="form-control" id="ph2">
</div>
<div class="col-md-6">
<label for="ph3">Number</label>
<input type="text" class="form-control" id="ph3">
</div>
</div>
</div>
</div>最佳答案
不使用 form-inline，而是嵌套另一个 form-row 并使用 no-gutters 来限制输入之间的空间。使用 col-* 而不是 col-md-* 将防止电话输入堆叠。
https://www.codeply.com/go/mSrkHKgvgs
<div class="form-row">
<div class="col-md-5">
<label for="ph1">Label</label>
<input type="text" class="form-control" id="label">
</div>
<div class="col-md-5">
<div class="form-row no-gutters">
<div class="col-3">
<label for="ph1">Country</label>
<input type="text" class="form-control" id="ph1">
</div>
<div class="col-3">
<label for="ph2">Area</label>
<input type="text" class="form-control" id="ph2">
</div>
<div class="col">
<label for="ph3">Number</label>
<input type="text" class="form-control" id="ph3">
</div>
</div>
</div>
</div>
关于css - 使用 Bootstrap 内联的电话表单输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49543774/