Twitter bootstrap 如何将引导3模式宽度设置为网格列_Twitter Bootstrap_Modal Dialog_Bootstrap Modal

Twitter bootstrap 如何将引导3模式宽度设置为网格列

twitter-bootstrap

Twitter bootstrap 如何将引导3模式宽度设置为网格列,twitter-bootstrap,modal-dialog,bootstrap-modal,Twitter Bootstrap,Modal Dialog,Bootstrap Modal,我使用Bootstrap3Grid设计了一个包含3列的网页。网格定义如下： <body> <div class='container-fluid'> <div class="row"> <div class="col-xs-1"></div> <div class="col-xs-10"> <form action=

我使用Bootstrap3Grid设计了一个包含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>

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

...

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

模态定义如下：

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

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


×
添加数据元素
指定元素类型
选择1
选择2
取消
提交

显示模式时，我想设置其宽度，但失败。模式的宽度始终与浏览器宽度相同。我试图使用一行3列（

col-xs-3

，

col-xs-6

，

col-xs-3

）来限制模态定义。看起来div

add\u element\u model

的定义不正确。但我没能把它弄对

有人能帮忙吗？

您应该更改.modal类的宽度以使用更大的模态窗口，或者您可以使用