如何更改Twitter Bootstrap模式框的默认宽度？

Question

我尝试了以下方法:

   <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')

结果不是我的预期.模态左上方位于屏幕中央.

谁能帮我.有没有人试过这个.我认为这不是一件不寻常的事情.

Answer 1

更新:

在bootstrap 3您需要更改模态对话框.因此,在这种情况下,您可以modal-admin在modal-dialog看台所在的位置添加该类.

原始答案(Bootstrap <3)

是否有某种原因你试图用JS/jQuery改变它？

您可以使用CSS轻松完成,这意味着您无需在文档中进行样式设置.在您自己的自定义CSS文件中,添加:

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

在你的情况下:

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

我将body放在选择器之前的原因是它比默认值具有更高的优先级.这样您就可以将其添加到自定义CSS文件中,而无需担心更新Bootstrap.

Answer 2

如果你想让它只用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提供的修复.

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

Answer 3

如果您正在使用Bootstrap 3,则需要更改模态对话框div,而不是像接受的答案中所示的模态div.此外,为了保持Bootstrap 3的响应特性,使用媒体查询编写覆盖CSS非常重要,因此模式在较小的设备上将是全宽的.

看到这个JSFiddle来试验不同的宽度.

HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

Answer 4

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

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

正如@Marco Johannesen所说,选择器之前的"主体"使得它比默认值具有更高的优先级.

Answer 5

在Bootstrap 3+中,更改模式对话框大小的最合适方法是使用size属性.下面是一个例子,注意modal-sm沿着modal-dialog类,指示一个小模态.它可以包含sm小型,md中型和lg大型的值.

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>

Answer 6

对于Bootstrap 3这里是如何做到这一点.

modal-wide在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 */
}

没有必要覆盖margin-left在Bootstrap 3得到这个现在被居中.

Answer 7

在Bootstrap 3中,您只需要这个

<style>
    .modal .modal-dialog { width: 80%; }
</style>

以上大多数答案对我没有用!!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<style>
  #myModal1 .modal-dialog {
    width: 80%;
  }
  #myModal2 .modal-dialog {
    width: 50%;
  }
</style>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  80%
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  50%
</button>
<center>
  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 80%
        </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>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 50%
        </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>
    </div>
  </div>

</center>

Answer 8

解决方案来自此页面

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

Answer 9

在Bootstrap的第3版中,有一种简单的方法可以使模态更大.只需在modal-dialog旁边添加类modal-lg即可.

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">

Answer 10

Bootstrap 3:为了维护小型和小型设备的响应功能,我做了以下工作:

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

Answer 11

这就是我所做的,在我的custom.css中我添加了这些行,就是这样.

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

显然,您可以更改宽度的大小.

Answer 12

如果Bootstrap> 3,只需为您的模态添加样式.

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

Answer 13

我发现这个解决方案对我来说效果更好.你可以用这个:

$('.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

Answer 14

FYI Bootstrap 3自动处理左侧属性.因此,只需添加此CSS将更改宽度并使其保持居中:

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