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

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

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

当前回答

.Size(ModalSize.Large)

sample:
 using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalProject_" + modelItem.id).Closeable().Size(ModalSize.Large)))
                {
}

2017-08-08 16:31:39

其他回答

在css文件中添加以下内容

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

2014-12-05 04:36:17

与其使用百分比来使模式响应，我发现可以通过使用已经内置到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

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

如果你正在使用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) */
    }
}

2013-08-01 17:02:50

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

推荐文章

最新文章

标签