如何将引导程序 3 模态宽度设置为网格列答案

【问题标题】：How to set bootstrap 3 modal width to a grid column如何将引导程序 3 模态宽度设置为网格列
【发布时间】：2014-03-31 16:23:40
【问题描述】：

我使用 bootstrap 3 网格来设计一个包含 3 列的网页。网格定义如下：

<body>
    <div class='container-fluid'>
        <div class="row">
            <div class="col-xs-1"></div>
            <div class="col-xs-10">
                <form action="#">
                    ...
                </form>
            </div>
            <div class="col-xs-1"></div>
        </div>

表单内有一个按钮。单击该按钮时，将显示一个引导模式。

Modal定义如下：

<div id="add_element_modal" class="modal fade">
    <div class="modal-content">
        <div class="row">
            <div class="col-xs-3"></div>
            <div class="col-xs-6">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Add Data Element</h4>
                </div>
                <div class="modal-body">
                    <h4>Specify Element Type</h4>
                    <div class="radio">
                        <label>
                            <input type="radio" name="element_type" id="et_q" value="v1" checked>Option 1
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="element_type" id="et_ft" value="v2">Option 2
                        </label>
                    </div>
                </div>
                <div class="col-xs-3"></div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
            <button type="button" class="btn btn-primary" id="btn_add_element">Submit</button>
        </div>
    </div>
</div>

当显示模态框时，我想设置它的宽度但失败了。 Modal 的宽度始终与浏览器的宽度相同。我尝试使用具有 3 列的行（col-xs-3、col-xs-6、col-xs-3）来限制模态定义。看起来 div add_element_modal 定义不正确。但我做错了。

谁能帮忙？

【问题讨论】：

标签： twitter-bootstrap modal-dialog bootstrap-modal

【解决方案1】：

您应该更改 .modal 类的宽度以使用更大的模态窗口，或者您可以使用http://jschr.github.io/bootstrap-modal/

【讨论】：