调整模态大小,可用空间下降?

时间:2013-09-11 05:08:43

标签: html css twitter-bootstrap

我正在使用twitter bootstrap模态功能。

我已经调整了我的模态以使宽度更大,但是不是我的内容填充新打开的空间,而是内容区域变得更小。我怎么能让我的药片都在一条线上?

CSS

.modal-body {
    max-width:65%;
}
.modal {
    width:65%;
    margin-left: -32.5%; 
}

HTML

<div id="newItemModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
    <h3>New Item</h3>
</div>
<div class="modal-body">
<div class="control-group">
<ul class="nav nav-pills">
          <li class="active"><a href="#">Hot Food</a></li>
          <li><a href="#">Cold Food</a></li>
          <li><a href="#">Breads</a></li>
          <li><a href="#">Breakfast</a></li>
          <li><a href="#">Drinks</a></li>
          <li><a href="#">Dessert</a></li>
          <li><a href="#">Banquets</a></li>
        </ul>
</div>
</div>
<div class="modal-footer">
    <a href="#" class="btn btn-primary btn-small" id="cNewItem">CONFIRM</a>
    <a href="#" class="btn btn-small" data-dismiss="modal">CANCEL</a>
</div>

我上传了一张比较模态

之前和之后的图像

http://imgur.com/VtjDU4Y - 之前

http://imgur.com/n4BvewK - 之后(红圈是我的编辑)

感谢阅读。

0 个答案:

没有答案