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

Question

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

理想情况下，我希望前两个字段集彼此对齐，第三个字段集（包含textarea和提交按钮）占用模式的整个宽度。

我试图使用行和跨度来使它们很好地播放，但我不确定在去的路上。似乎从头开始没有总计。

还有其他人取得过类似的成就吗？

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填充，不在下面。

呈现预览

如果您想了解如何构建模态的标题或页脚（在上例中的省略号之前/之后），您可以查看layout of Bootstrap modals here。

Answer 3

你可以做这样的事情

<div class="modal">
<form class="modal-form">
<div class="modal-header"></div>
<div class="modal-body"> input elements here </div>
<div class="modal-footer">
   <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
   <button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
<div class="modal">

希望这有帮助，