模态宽度(增加)

我希望一个模态是80% 左右的屏幕宽度。 modal-lg不够大。这:

.modal .modal-dialog {
width: 80%;
}

4号引导程序不起作用。

164634 次浏览
小开

确保您的模态不放在容器中，尝试添加！重要的注释，如果它没有改变宽度从原来的一个。

小开

尝试使用 px

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

只要改变大小。

小开
最佳答案

鞋带3

您可以创建或者只是覆盖默认的引导 modal-lg，方法如下:

.modal-lg {
max-width: 80%;
}

如果不工作，只需添加 !important，这样它会看起来像下面

.modal-lg {
max-width: 80% !important;
}

现在打电话给 modal-lg。

<div class="modal-dialog modal-lg" role="document">
<!-- some modal content --->
</div

对于 鞋带4，请参考@kitsu.eb 应答。还要注意，使用 bootstrap 4实用程序可能会破坏响应性。

小开

简单使用! 重要后，给予宽度的类，是覆盖您的类。

例如 

.modal .modal-dialog {
width: 850px !important;
}

希望这对你有用。

小开

如果你用萨斯,

根据 文件你可以自定义你的默认值。

在您的示例中，可以轻松地覆盖 _custom.scss文件中名为 $modal-lg的变量。

小开

回答问题。

@media (min-width: 992px) {
.modal-dialog {
max-width: 80%;
}
}
小开

在 Bootstrap 4中，你必须使用“ max-width”属性，然后它才能完美工作。

<div id="modal_dialog" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog" style="max-width: 1350px!important;" role="document">
<div class="modal-content">
<div class="modal-body">
Sample text
</div>
</div>
</div>

小开

这就是对我有效的解决办法:

.modal{
padding: 0 !important;
}
.modal-dialog {
max-width: 80% !important;
height: 100%;
padding: 0;
margin: 0;
}


.modal-content {
border-radius: 0 !important;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" class="menu-toggler" data-toggle="modal" data-target=".bd-example-modal-lg">Menu</a>


<div class="modal mobile-nav-modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<a href="#" class="" data-dismiss="modal">Close Menu</a>


<nav class="modal-nav">
<ul>
<li><a data-toggle="collapse" href="#collapseExample" role="button">Shop</a>
<div class="collapse" id="collapseExample">
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
</li>
<li><a href="#">Made To Order</a></li>
<li><a href="#">Heritage</a></li>
<li><a href="#">Style & Fit</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</nav>
</div>
</div>
</div>

小开

引导程序4包括 分级公用事业。您可以将大小更改为页面宽度的25/50/75/100% (我希望有更多的增量)。

为了使用这些类，我们将替换 modal-lg类。默认宽度和 modal-lg都使用 css max-width来控制模式的宽度，所以首先添加 mw-100类来有效地禁用 max-width。然后只需添加你想要的宽度类，例如 w-75。

请注意，您应该将 mw-100和 w-75类放在包含 modal-dialog类的 div 中，而不是放在 modal div 中，例如,

<div class='modal-dialog mw-100 w-75'>
...
</div>

此外，我们甚至可以使用众所周知的 container类(而不是指定大小) ，如:

<div class="modal-dialog mw-100">
<div class="modal-content container">
<div class="modal-body">
...
</div>
</div>
</div>
小开 
The following solution will work for Bootstrap 4.


.modal .modal-dialog {
max-width: 850px;
}
小开

试试这个，这是对我有效的解决办法:

<div class="modal-dialog" style="min-width: 1500px" role="document">
小开

所以我也一直在同一个问题上挣扎。解决这个问题最快最简单的方法就是

  1. modal-lg对你的模态分辨率

例子 <div class="modal-dialog modal-lg">

小开

将 max-width:80%;设置为内联样式表

<div class="modal-dialog modal-lg" role="document" style="max-width: 80%;">
小开

可以使用绝对单位和相对单位的组合

.modal-dialog-xw {
margin-left: auto;
margin-right: auto;
min-width: 330px;    /* To prevent shrinking of very small screens (Galaxy S9 for example) */
max-width: 75%;      /* To use 75% of the width available. Or set in pixels if need. */
}

在 html 代码中，在. modal- 对话框之后添加

<div class="modal-dialog modal-dialog-xw" role="document">...</div>

提交答案