3

在 Twitter Bootstrap 中，模态弹出窗口的默认宽度为 560 像素，left为 50%。我希望模态弹出窗口的宽度更大。因此，我将该类添加span10到模态弹出窗口中。但是当left固定为 50% 时，模态弹出窗口会向右移动。为了解决这个问题，我left: 8%在模式弹出窗口中添加了内联 CSS。它按我的意图工作。但我想知道是否有任何技巧可以使用 Twitter Bootstrap 的默认 CSS 而不使用任何额外的 CSS（内联、内部或外部）。

4

1 回答 1

10

使用 Bootstrap 2.2，我向容器添加了一个 CSS 选择器，并将andmodal设置为/2 * -1。widthmargin-leftwidth

例子：

#MyModal {
   width: 900px; 
   margin-left: -450px;
}

HTML：

<div id="MyModal" class="modal hide fade" role="dialog">
  <!-- etc. -->
</div>

编辑

Bootstrap 目前没有办法通过 JS 或 data-role 行为来自定义模态框的宽度。如果你想要一个新的全局默认宽度，你要么必须 fork bootstrap 并修改他们的 LESS 模板，编辑编译的 CSS，或者使用类似于我描述的选择器将 CSS 添加到你自己的样式表中，并在 bootstrap 之后包含它.css 在您的页面中。后者是最简单的。

或者，如果您想保留默认宽度但预定义了一些典型的模态尺寸，您可以在自己的样式表中添加一些类选择器并根据需要添加类名。

.modal-small { width: 200px; margin-left: -100px; }
.modal-large { width: 900px; margin-left: -450px; }

HTML：

 <div class="modal modal-large hide fade" /> <!-- make this one large -->
 <div class="modal modal-small hide fade" /> <!-- and this one small -->
于 2013-03-06T07:32:44.340 回答