引导网格问题（重叠 div）答案

【问题标题】：Bootstrap grid problems (overlapping divs)引导网格问题（重叠 div）
【发布时间】：2015-05-06 00:59:25
【问题描述】：

我知道这个问题已经回答了，但我真的不明白我错在哪里。

我有一个这样结构的网格：

<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>

twitter 容器与其他 div 重叠。我是否必须对引导类进行一些处理？

【问题讨论】：

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

您将一行直接包裹在另一行之下。始终尝试在容器或列 div 下保留一行。

您可以像这样将顶部父行更改为容器：

<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>

或者您可以像这样在父行下添加一个 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>

【讨论】：

【解决方案2】：

尝试使用 .container > .row > 列结构遵循引导文档：

<div class="container">
    <div class="row">
        <div class="col-md-*">
        </div>
    </div>
</div>

星号是您尝试使用的任何大小。我不知道为什么你有一行嵌套在一行中。

如果您希望它是全角的，请将 .container 类替换为 .container-fluid。

【讨论】：

【解决方案3】：

看看你的标记和你的问题没什么好说的。

你正在做这样的事情：

<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>

它代表另一行下方的一行。但是，也许您正在寻找这样的东西：

<div class="row">
  <div class="left-content col-lg-8"></div>
  <div class="right-content col-lg-4"></div>
</div>

哪一行被分成两个不同宽度的部分。

【讨论】：