twitter-bootstrap – 尝试使引导模式更广泛

发布时间：2020-12-18 00:18:46 所属栏目：安全来源：网络整理

导读：我使用这个代码,但是模态太细了： div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal" div class="modal-dialog modal-lg" div class="modal-content modal-

我使用这个代码,但是模态太细了：

<div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-lg">
            <div class="modal-header modal-lg">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Solutions</h4>
            </div>
            <div class="modal-body modal-lg">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

这是它的样子：

我如何使这种模式更广泛？理想情况下,我希望它的宽度大约是双倍,因为它太瘦了.

解决方法

始终使用未经简化的CSS进行引导,以便您可以看到他们的组件具有哪些样式,然后在之后创建一个CSS文件,如果您不使用LESS并覆盖其混合或其他任何内容

这是768px及以上的默认模式css：

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  ...
}

它们具有较大宽度的类模式

@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

如果您需要两倍于600px尺寸的东西,并且有些流畅的东西,则在Bootstrap css之后,在CSS中执行此类操作,并将该类分配给模态对话框.

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

HTML

<div class="modal-dialog modal-xl">

演示：http://jsbin.com/yefas/1

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!