Question

我使用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>

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

模态定义如下：

<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。但我无法做对。

有人可以帮忙吗？

Answer 1

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

如何将bootstrap 3模态宽度设置为网格列

1 个答案: