html - 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

Bootstrap 为不同的屏幕提供了四个类:

1. xs 超小
2. sm 小
3. md 为介质
4. lg 适用于大屏幕

在您的以下代码中应该可以工作，您可以根据屏幕需要进行自定义:

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