Bootstrap 输入组换行格式

Question

基本上我有一堆带有复选框和标签的行，占据了 2 列空间。有些标签比其他标签更长，因此当您调整浏览器大小或在移动设备上查看时，具有较长标签的列将折叠到第二行，而较短的标签则保留在复选框旁边。看起来像废话。

HTML：

<div class = "row">
<div class="col-lg-2"> 
   <div class="input-group">
   <input type="checkbox">
        Small Label
   </div>
</div>
    <div class="col-lg-2"> 
   <div class="input-group">
   <input type="checkbox">
        Big Label that collapses first
   </div>
</div>
</div>

有没有办法让其中一个倒塌，那么整排都倒塌？

更好的是拥有一个像图像一样工作的动态字体，并且根据需要放大和缩小，最多占据 100%，根本不会导致崩溃。我可以只使用图像，但我有很多这样的标签，为每个标签制作图像将花费很长时间。

Answer 1

您可以将自定义 CSS 添加到引导样式中，并定义一些简单的 CSS 规则，因为您希望强制样式表现...

CSS 示例：

.input-group {
  display: inline;
}

我认为正确的 HTML 元素是一个列表..不过，如果您要编辑 CSS...很高兴知道您可以将自定义 css 文件添加到您的项目中并在引导样式中使用 CSS 类像这样：

CSS：

.checkbox-inline {
  display: inline;
}

HTML：

<div class="input-group checkbox-inline">
  <input type="checkbox">
    Small Label
</div>

有很多可能的答案......也许，您也会发现这个问题很有用。