twitter-bootstrap – 带有跨距的Twitter引导行

发布时间：2020-12-18 00:27:21 所属栏目：安全来源：网络整理

导读：使用twitter bootstrap,我试图找出为什么最后一个“列”包装. div class="row span4 solidBottom" div class="span1" labelA/label /div div class="span1" labelB/label /div div class="span1" labelC/label /div div class="span1" labelD/label /div/div

使用twitter bootstrap,我试图找出为什么最后一个“列”包装.

<div class="row span4 solidBottom">
        <div class="span1">
            <label>A</label>
        </div>
        <div class="span1">
            <label>B</label>
        </div>
        <div class="span1">
            <label>C</label>
        </div>
        <div class="span1">
            <label>D</label>
        </div>
</div>

结果是：

A   B   C 
 D
___________

SPAN 4 = 300px
Four Span1s = 240
3 Paddings = 60
240 + 60 = 300

那么任何线索呢为什么它包装？

我试图制作多列表单,并希望保持列和行的组织.

谢谢.

编辑：添加style =“width：auto”到行解决问题,但为什么300px默认宽度换行？

解决方法

你是正确的,span4是300px,但我相信你的HTML有一个错误.

您需要将嵌套的列包装在一个新的.row类中.当你这样做时,包装停止.请参阅http://jsfiddle.net/panchroma/UBTv4/和使用默认(非流体)Bootstrap网格的示例.

这是我使用的HTML：

<div class="container">

<div class="row">
    <div class="span4 solidBottom">

        <div class="row">
            <div class="span1">
                <label>A</label>
            </div>

            <div class="span1">
                <label>B</label>
            </div>

            <div class="span1">
                <label>C</label>
            </div>

            <div class="span1">
                <label>D</label>
            </div>

        </div> <!-- end nested row -->

        <div class="span8"> </div>

  </div> <!-- end parent row -->
</div> <!-- end container -->

对于固定网格,嵌套行中的列数应加上父列中的列数(即在这种情况下为四个)

如果您使用流体网格(即行流体),则嵌套行中的列数应该最多可以为12.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!