我如何改变Twitter引导模式框的默认宽度?

我尝试了以下方法:

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

这段Javascript:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

结果不是我预料的那样。模态的左上角位于屏幕的中心。

有人能帮帮我吗?有人试过吗?我想这是一件很平常的事。

当前回答

与其使用百分比来使模式响应，我发现可以通过使用已经内置到bootstrap中的列和其他响应元素来获得更多的控制。

要使模态响应/任意数量的列的大小: 1)在模态对话框div周围添加一个额外的div，类为.container -

<div class="container">
    <div class="modal-dialog">
    </div>
</div>

2)添加一点CSS，使模式全宽

.modal-dialog {
    width: 100% }

3)如果你有其他情态动词，可以选择增加一个额外的类-

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }

4)添加在一行/列，如果你想要各种大小的情态动词-

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>

2014-01-15 11:50:38

其他回答

解决方案取自此页

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});

2012-07-05 11:03:22

使用下面的脚本:

.modal {
  --widthOfModal: 98%;
  width: var(--widthOfModal) !important;
  margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
  height: 92%;

  overflow-y: scroll;
}

演示:

2018-06-20 12:10:02

如果你想要一些不会破坏相对设计的东西，试试这个:

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

正如@Marco Johannesen所说，选择器之前的“主体”是为了让它具有比默认更高的优先级。

2012-05-09 09:49:46

这就是我在custom。css中所做的，我添加了这些行，仅此而已。

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

显然，你可以改变宽度的大小。

2014-06-22 14:09:55

引导3:为了保持小型和超小型设备的响应功能，我做了以下工作:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}

2013-09-27 11:37:58

我如何改变Twitter引导模式框的默认宽度?

推荐文章

最新文章

标签