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-row，而是嵌套另一个no-gutters并使用col-*来限制输入之间的空间。使用col-md-*代替<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>可防止手机输入堆叠。

https://www.codeply.com/go/mSrkHKgvgs

np.broadcast_to

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

1 个答案: