使用默认的Twitter Bootstrap CSS将中心对齐大于默认宽度的模式弹出窗口

Question

在Twitter Bootstrap中,模式弹出窗口的默认宽度为560px,left为50%.我希望模态弹出窗口的宽度更大.所以,我将该类添加span10到模态弹出窗口中.但由于left固定为50%,模态弹出窗口向右移动.为了解决这个问题,我将left: 8%内联CSS 添加到模态弹出窗口中.它按我的意图工作.但我想知道是否有任何技巧可以使用Twitter Bootstrap的默认CSS并且不使用任何额外的CSS(内联,内部或外部).

Answer 1

通过引导2.2,我添加一个CSS选择的modal容器中,并设置width和margin-left至width/ 2*-1.

例:

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

HTML:

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

编辑

Bootstrap目前没有办法通过JS或数据角色行为来定制模态的宽度.如果你想全局一个新的默认宽度,你要么必须分叉引导程序并修改它们的LESS模板,编辑编译的CSS,或者使用类似于我描述的选择器将CSS添加到你自己的样式表中并在引导程序后包含它.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 -->