是否可以在Twitter Bootstrap中使用"行"和"跨越"内部模态？

Question

我正在尝试使用Twitter Bootstrap中的模态来实现联系表单.

理想情况下,我希望前两个字段集彼此对齐,第三个字段集(包含textarea和提交按钮)占用模态的整个宽度.

我试图使用行和跨度来使它们很好地发挥,但我不确定在去的路上.看起来似乎没有一个span12开头.

还有其他人有类似的东西吗？

Answer 1

是的,只需使用"row-fluid"类将其放入模态体内,该类将调整为可用空间(除非您更改了这些样式):

<div class="row-fluid">
<div class="span6">something</div>
<div class="span6">something else</div>
</div>

Answer 2

这是一个仅使用Twitter Bootstrap 3类的解决方案 - 即row:col-sm-6和clearfix:

HTML

...
<div class="modal-body row">
    <div class="col-sm-6" style="border: 1px solid black;">
        <p>First column with fieldset</p>
    </div>
    <div class="col-sm-6" style="border: 1px solid blue;">
        <p>Second column with fieldset</p>
    </div>
    <div class="clearfix">
    </div>
    <div class="col-sm-12" style="border: 1px solid red;">
        <p>Row that expands the whole width of modal &ndash; text area and submit button</p>
    </div>
</div>
...

为列提供了边框以便于查看.请注意,<p>标签周围还有默认的Bootstrap填充,下面没有边框.

渲染预览

如果你想看看如何构造模态的标题或页脚(在上例中的省略号之前/之后),你可以在这里查看Bootstrap模态的布局.