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示例：

<html>
<head>
<meta charset="UTF-8">
<title>Loading</title>
<link href="demo.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>

<body>

</body>
</html>

我认为正确的HTML元素是列表 .. 虽然，如果你要编辑CSS ...很高兴知道你可以为你的项目添加一个自定义的css文件，并使用你的bootstrap样式的CSS类：

<强> CSS：

.input-group {
  display: inline;
}

<强> HTML：

.checkbox-inline {
  display: inline;
}

有很多可能的答案...... 也许，你也会发现this question很有用。

Answer 2

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

xs 为超小
sm for small
md for medium
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>

Bootstrap输入组换行格式化

2 个答案: