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

其他回答

3.引导x.x

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <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 row">
                Modal Body...
            </div>

            <div class="modal-footer"> 
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

        </form>

    </div>
</div>

注意，我在第二个div中添加了. employeemodal类。然后设置该类的样式。

.employeeModal{
        width: 700px;
    }

2017-08-04 03:34:21

我为Bootstrap 4.1解决了这个问题

混合之前发布的解决方案

.modal-lg { Max-width: 90% !/*所需的相对宽度*/ margin-left:汽车!重要; margin-right:汽车!重要; ｝

2018-10-10 20:18:59

.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

如果你正在使用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

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

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

推荐文章

最新文章

标签