基本上我有一堆带有复选框的行和一个占用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.
更多推荐
发布评论