twitter-bootstrap Bootstrap 模态对话框。网格系统可以在模态上下文中使用吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24204315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal Dialog. Can the grid system be used within a modal context?
提问by dugla
I have a Bootstrap modal dialog for which I want to layout the various labels and inputs. I have tried using row/column classes but they do not appear to do anything. What are my options here?
我有一个 Bootstrap 模态对话框，我想为其布置各种标签和输入。我曾尝试使用行/列类，但它们似乎没有做任何事情。我在这里有哪些选择？
Thanks,
Doug
谢谢，
道格
回答by Tom Rudge
I got it working ok...http://www.bootply.com/WAwE3QyUdb
我让它工作正常...... http://www.bootply.com/WAwE3QyUdb
Add a col to the container inside the modal-body.
将 col 添加到 modal-body 内的容器中。
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Modal header</h3>
</div>
<div class="modal-body">
<div class="container col-md-12">
<div class="row">
<div class="col-md-3">
1st col 3
</div>
<div class="col-md-3">
2nd col 3
</div>
<div class="col-md-3">
3rd col 3</div>
</div>
</div>
</div>
</div>
</div>
</div>
回答by dmeehan
Just add the row class to your modal as per the code below and then you can divide up your modal as you wish:
只需按照下面的代码将行类添加到您的模态中，然后您就可以根据需要划分您的模态：
<div class="modal-body row">
<div class="col-md-8">
<p>Column One content here ... </p>
</div>
<div class="col-md-4">
<p>Column Two content here ... </p>
</div>
</div>
回答by mjohnsonengr
Tom Rudge's answer inspired me. You don't need to make the container also be a full-width column itself which Matt Dell pointed out will fail linters.
Tom Rudge 的回答启发了我。您不需要使容器也成为一个全宽列本身，Matt Dell 指出这将导致 linters 失败。
Make the container container-fluid instead!
将容器容器改为流体！
bootply showing col-md-12 and container-fluid side by side
bootply 并排显示 col-md-12 和 container-fluid
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Modal with container fluid</h3>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<p>
1st col 3
</p>
</div>
<div class="col-md-3">
<p>
2nd col 3
</p>
</div>
<div class="col-md-3">
<p>
3rd col 3
</p>
</div>
<div class="col-md-3">
<p>
4th col 3
</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
回答by Ismail Farooq
have a look bootstrap exampleno need to add containeror container-fluidor col-*classes with modal-bodyor inside modal-body
看看引导程序示例，无需在或里面添加container或container-fluid或col-*类modal-bodymodal-body
<div class="modal-body">
<div class="row">
<div class="col-md-3">
<p>1st col 3</p>
</div>
<div class="col-md-3">
<p>2nd col 3</p>
</div>
<div class="col-md-3">
<p>3rd col 3</p>
</div>
<div class="col-md-3">
<p>4th col 3</p>
</div>
</div>
</div>
回答by LucasS
From the docs
从文档
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</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 -->
回答by demonde
For Bootstrap 4 you can create a modal container with SCSS.
对于 Bootstrap 4，您可以使用 SCSS 创建一个模态容器。
The .modal-containerclass should be added to the .modal-dialog
本.modal-container类应该被添加到.modal-dialog
Variables:
变量：
$modal-container-max-widths: (
xs: 90%,
sm: 540px,
md: 720px,
lg: 960px,
xl: 1200px,
);
Coding:
编码：
@mixin make-modal-max-widths-container-width($max-widths: $modal-container-max-widths, $breakpoints: $grid-breakpoints) {
@each $breakpoint, $modal-container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $modal-container-max-width;
}
}
}
.modal-container{
@include make-modal-max-widths-container-width();
}
Some additional CSS is recommended.
建议使用一些额外的 CSS。
.modal-container{
margin-left: auto;
margin-right: auto;
padding-left: ($spacer / 2);
padding-right: ($spacer / 2);
}
回答by Scott Simpson
You can make the Bootstrap modal responsive by resetting the container widths:
您可以通过重置容器宽度使 Bootstrap 模态响应：
.modal-body {padding: 5px}
.modal-dialog {
@media(min-width: $screen-sm-min){
width: 600px;
.container {
width: 590px;
}
}
@media(min-width: $screen-md-min){
width: 800px;
.container {
width: 790px;
}
}
@media(min-width: $screen-lg-min){
width: 1000px;
.container {
width: 990px;
}
}
}
