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

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

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

当前回答

我使用了SCSS和全响应模态:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
}

2014-08-02 17:10:34

其他回答

在css文件中添加以下内容

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

2014-12-05 04:36:17

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

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

基于较少的解决方案(无js) Bootstrap 2:

.modal-width(@modalWidth) {
    width: @modalWidth;
    margin-left: -@modalWidth/2;

    @media (max-width: @modalWidth) {
        position: fixed;
        top:   20px;
        left:  20px;
        right: 20px;
        width: auto;
        margin: 0;
        &.fade  { top: -100px; }
        &.fade.in { top: 20px; }
    }
}

然后无论你想指定一个模态宽度:

#myModal {
    .modal-width(700px);
}

2013-11-25 23:41:09

我使用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

使用下面的脚本:

.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

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

推荐文章

最新文章

标签