Bootstrap输入组换行格式化(Bootstrap input group line break formatting)

Bootstrap输入组换行格式化(Bootstrap input group line break formatting)

基本上我有一堆带有复选框的行和一个占用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％，以免导致崩溃。 我可以使用图像，但我有很多这些标签，并且需要永远为每个标签制作图像。

Basically I have a bunch of rows with a check box and a label taking up 2 column spaces. Some of the labels are longer then others so when you resize the browser or are viewing on a mobile device the columns with longer labels will collapse to a second row and the shorter ones stay beside their check box. It looks like crap.

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>

Is there a way to make it so that if one of them collapses then the whole row does?

Even better would be to have a dynamic font that worked like an image and just grew and shrank taking up a maximum of 100% as necessary to not cause a collapse at all. I could just use images but I have a lot of these these labels and it will take forever to make an image for each.

最满意答案

您可以为引导程序样式添加自定义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>

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

You can add a custom CSS to your bootstrap style and define some simple CSS rules as you would like to force the style to behave...

CSS Example:

.input-group { display: inline; }

I think the right HTML element for this is a list.. although, If you are going to edit the CSS... It's good to know that you can add a custom css file to your project and use a CSS class with your bootstrap style like this:

CSS:

.checkbox-inline { display: inline; }

HTML:

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

There are many possible answers... maybe, you will also find this question useful.