twitter-bootstrap Bootstrap 网格问题（重叠 div）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28864619/
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 grid problems (overlapping divs)
提问by Silvio Zoidberg Sdord
I know that this question is already answered but I really don't get where I'm wrong.
我知道这个问题已经得到回答，但我真的不明白我错在哪里。
I have a grid with this structure:
我有一个具有这种结构的网格：
<div class="row">
<div class="row">
<div class="left_content col-lg-8 col-sm-12">
<div class="row">
<div class="news_report col-lg-6 col-sm-6">
</div>
<div class="news_report col-lg-6 col-sm-6">
</div>
</div>
<div class="row">
<div class="recursos_container col-xs-6">
</div>
<div class="more_info_container col-xs-6">
<div class="alerts_container">
</div>
<div class="acces_to_catalog_container">
</div>
</div>
</div>
<div class="row">
<div class="app_info_container col-xs-12">
<div class="app_left_content">
</div>
<div class="app_right_content">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="right_content col-lg-4 col-sm-12">
<div class="row">
<div class="twitter_container">
<div class="twitter_header">
</div>
<div class="twitter_content">
</div>
</div>
</div>
<div class="row">
<div class="blog_container">
<div class="blog_side_header">
</div>
<div class="blog_side_content">
<div class="blog_side_post">
</div>
<div class="blog_side_post">
</div>
<div class="blog_side_post">
</div>
<div class="blog_side_post">
</div>
</div>
<div class="blog_side_footer">
</div>
</div>
</div>
</div>
</div>
</div>
The twitter container is overlapping the others divs. Do I have to make a bit of mess with the bootstrap classes?
Twitter 容器与其他 div 重叠。我是否必须对引导程序类造成一些混乱？
回答by AndrewL64
You are wrapping a row directly under another row. Always try to keep a row under a container or a column div.
您将一行直接包装在另一行之下。始终尝试在容器或列 div 下保留一行。
You can either change the top parent row to container like this:
您可以将顶部父行更改为容器，如下所示：
<div class="container">
<div class="row">
<div class="left_content col-lg-8 col-sm-12">
<div class="row">
<div class="news_report col-lg-6 col-sm-6">
</div>
<div class="news_report col-lg-6 col-sm-6">
</div>
</div>
OR you can add a col div under the parent row like this:
或者您可以在父行下添加一个 col div，如下所示：
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="left_content col-lg-8 col-sm-12">
<div class="row">
<div class="news_report col-lg-6 col-sm-6">
</div>
<div class="news_report col-lg-6 col-sm-6">
</div>
</div>
回答by plushyObject
Try following the Bootstrap documentation by using the .container > .row > column structure:
尝试使用 .container > .row > 列结构来遵循 Bootstrap 文档：
<div class="container">
<div class="row">
<div class="col-md-*">
</div>
</div>
</div>
Where the asterisk is whatever size you're trying to use. I am not sure why you have a row nested in a row nested in a row.
星号是您尝试使用的任何大小。我不确定为什么你有一行嵌套在一行嵌套的行中。
If you want it to be full-width, replace the .container class with .container-fluid.
如果您希望它是全角的，请将 .container 类替换为 .container-fluid。
回答by Patrick
Looking at your markup and your question there is not too much to say.
看看你的标记和你的问题，没什么好说的。
You're doing something like this:
你正在做这样的事情：
<div class="row">
<div class="row">
<div class="left-content col-lg-8"></div>
</div>
<div class="row">
<div class="right-content col-lg-4"></div>
</div>
</div>
Which represents one row below other one. But, maybe you're looking for something like this:
它代表另一行下面的一行。但是，也许您正在寻找这样的东西：
<div class="row">
<div class="left-content col-lg-8"></div>
<div class="right-content col-lg-4"></div>
</div>
Which is one row split in two sections with different width.
这是一行分成两个不同宽度的部分。
