我如何改变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 3，这里是如何做到这一点。

在HTML标记中添加一个模态范围样式(从Bootstrap 3文档中的示例改编而来)

<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

并添加以下CSS

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

现在不需要在Bootstrap 3中覆盖margin-left来让它居中。

2013-09-04 01:00:16

其他回答

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

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

2013-09-09 08:15:37

如果你想让它只响应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

我使用CSS和jQuery的组合，以及这个页面上的提示，使用Bootstrap 3创建流体的宽度和高度。

首先，使用一些CSS来处理内容区域的宽度和可选滚动条

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

然后用一些jQuery来调整内容区域的高度，如果需要的话

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

完整的编写和代码 http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

2013-10-16 22:38:50

在css文件中添加以下内容

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }

2014-12-05 04:36:17