我使用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 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没有正确定义。但我无法做到对。
有人可以帮忙吗？
您应该更改.modal类的宽度以使用更大的模态窗口，或者您可以使用http://jschr.github.io/bootstrap-modal/