Question

我想在输入旁边显示一个复选框。在较大的屏幕上它可以工作：

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <form class="py-3">
    <div class="form-group">
      <label>Noise level</label>
      <div class="form-inline">
        <input type="number" class="form-control">
        <div class="form-check">
          <input type="checkbox" id="auto" class="form-check-input ml-2">
          <label class="form-check-label" for="auto">auto</label>
        </div>
      </div>
      <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
    </div>
  </form>
</div>

＆＃13;

但是，当您点击＆＃34;运行代码段＆＃34;和＆＃34;整页＆＃34;并在一个狭窄的浏览器窗口中试用它，它看起来像这样：

如何修复损坏的复选框标签？

Answer 1

我找到的另一个解决方案是将课程form-check-inline添加到div.form-check：

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <form class="py-3">
    <div class="form-group">
      <label>Noise level</label>
      <div class="form-inline">
        <input type="number" class="form-control">
        <div class="form-check form-check-inline">
          <input type="checkbox" id="auto" class="form-check-input ml-2">
          <label class="form-check-label" for="auto">auto</label>
        </div>
      </div>
      <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
    </div>
  </form>
</div>

＆＃13;

Answer 2

虽然它们都依赖于Bootstrap网格，但您可以采用多种方法代替依赖form-inline：

（1）将input-group与input-group-append

一起使用

<div class="form-group">
  <label>Noise level</label>
  <div class="input-group">
    <input type="number" class="form-control">
    <div class="input-group-append">
      <div class="input-group-text">
        <input type="checkbox" id="auto" class="mr-2">
        <label class="form-check-label" for="auto">auto</label>
      </div>
    </div>
  </div>
  <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
</div>

（2）使用网格

<div class="form-group form-row align-items-center">
  <label class="col-12">Noise level</label>
  <div class="col-10">
    <input type="number" class="form-control">
  </div>

  <div class="col-2 text-center">
    <div class="form-check">
      <input type="checkbox" id="auto2" class="form-check-input">
      <label class="form-check-label" for="auto2">auto</label>
    </div>
  </div>

  <div class="col-12">
    <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
  </div>
</div>

（3）与（1）类似，您仍然可以使用input-group但省略input-group-text以避免灰色方形包装：

<div class="form-group">
  <label>Noise level</label>
  <div class="input-group">
    <input type="number" class="form-control">
    <div class="input-group-append">
      <div class="p-2">
        <input type="checkbox" id="auto3" class="mr-2">
        <label class="form-check-label" for="auto3">auto</label>
      </div>
    </div>
  </div>
  <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
</div>

您可以在https://www.bootply.com/VnuTFC0YrX

查看所有3个选项的输出

哪一个最佳可能是偏好和目的的问题。我对第一个选项的反应最好，因为input-group组合表单元素的方式可以更深入地了解所连接的两个项目。

Answer 3

因为引导类.form-inline有flex-flow: row wrap;只需将其覆盖在css中并使其成为flex-flow: row nowrap;并将类.mr-2添加到输入中以提供右边距

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <form class="py-3">
    <div class="form-group">
      <label>Noise level</label>
      <div class="form-inline" style="flex-flow: row nowrap;">
        <input type="number" class="form-control mr-2">
        <div class="form-check">
          <input type="checkbox" id="auto" class="form-check-input">
          <label class="form-check-label" for="auto">auto</label>
        </div>
      </div>
      <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
    </div>
  </form>
</div>

Bootstrap：带有复选框中断的输入字段，用于较小的屏幕尺寸

3 个答案: