9

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

理想情况下，我希望前两个字段集彼此对齐，第三个字段集（包含文本区域和提交按钮）占据模态框的整个宽度。

我曾尝试使用行和跨度使它们发挥得很好，但不确定如何去做。似乎没有一开始的 span12 。

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

4

3 回答 3

23

是的，只需使用“row-fluid”类将它放在模态体内，它将调整到可用空间（除非您更改了这些样式）：

<div class="row-fluid">
<div class="span6">something</div>
<div class="span6">something else</div>
</div>
于 2012-08-07T14:47:21.977 回答
5

这是一个仅使用 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 填充，下面没有边框。

渲染预览

上面呈现的 HTML 示例

如果您想了解如何构造模态框的标题或页脚（在上例中的省略号之前/之后），您可以在此处查看 Bootstrap 模态框的布局。

于 2014-03-10T02:47:00.543 回答
1

你可以做这样的事情

<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">

希望这可以帮助，

于 2012-08-07T14:43:12.030 回答