css - 使用 Bootstrap 内联的电话表单输入

Question

我正在尝试为电话输入创建一个 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>

Answer 1

不使用 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>