我如何改变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')

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

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

当前回答

达到预期效果使用，

.modal-dialog {
    width: 41% !important;
}

2016-08-05 14:16:00

其他回答

如果Bootstrap>3，只需添加样式到您的模式。

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>

2016-06-13 05:43:06

我找到了一个更适合我的方法。你可以用这个:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

或者根据你的要求:

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

请看我发现的帖子: https://github.com/twitter/bootstrap/issues/675

2013-02-08 01:56:04

使用下面的脚本:

.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

如果你想让它只响应CSS，使用这个:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

注1:我使用了一个.large类，你也可以在正常的.modal上这样做

注2:在Bootstrap 3中，左边的负边距可能不再需要了(未经个人确认)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

注3:在Bootstrap 3和4中，有一个modal-lg类。所以这可能是足够的，但如果你想让它响应，你仍然需要我为Bootstrap 3提供的修复。

在一些应用程序中使用固定模式，在这种情况下，你可以尝试width:80%;左:10%;(公式:left = 100 - width / 2)

2013-04-18 18:28:42

供参考，Bootstrap 3自动处理左侧属性。所以简单地添加这个CSS将改变宽度并保持居中:

.modal .modal-dialog { width: 800px; }

2013-09-09 08:15:37

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

推荐文章

最新文章

标签