[英]Bootstrap Grid System not working as expected in modal
I have a simple modal that I want to use to display content in. As shown below: 我有一个用于显示内容的简单模式。如下所示:
<div id="tacModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">title</h4>
</div>
<div class="modal-body">
<div class="container col-md-12" >
<div class="row">
<div class="col-md-2">
<img src="path/to/image" >
</div>
<div class="col-lg-10">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
</div>
The problem I face is that the content is placed in the footer when the screen size reaches a certain threshold. 我面临的问题是,当屏幕尺寸达到某个阈值时,内容将放置在页脚中。
On mobile and even tablet sized screens all the content is placed correctly in the modal-body. 在移动甚至平板电脑大小的屏幕上,所有内容均正确放置在模体中。 But on my desktop screen the content is placed inside the footer.
但是,在我的桌面屏幕上,内容位于页脚内。
Why is this, and how can I fix it? 为什么会这样,我该如何解决?
Remove .col-md-12
class from .container
. 从
.container
删除.col-md-12
类。 Its bad idea to mix .container
with Bootstrap's grid classes ( .col-*-*
). 将
.container
与Bootstrap的网格类( .col-*-*
)混合使用是个坏主意。
Why it's creating a problem? 为什么会造成问题?
If you look at css of Bootstrap, you will find: 如果您查看Bootstrap的CSS,则会发现:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 992px) {
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
float: left;
}
}
.container
is styled to remain in center of page. .container
的样式设置为保留在页面中心。 But on screens of 992px
and above your .container
is floating to the left and creating layout issue. 但是在
992px
及以上的屏幕上,您的.container
向左浮动并产生布局问题。 This float
is causing element after your .container
to take space on right side of .container
if possible and you see strange behavior. 该
float
在你的后引起元素.container
采取的右侧空间.container
如果可能的话,你会看到奇怪的行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.