引导移动版中的 div 重叠问题答案

【问题标题】：Div overlapping issue in bootstrap mobile version引导移动版中的 div 重叠问题
【发布时间】：2016-05-24 11:43:03
【问题描述】：

我有一个旋转木马，在引导程序中有 2 行。布局在标准视图中很好，但是当它进入移动查询时，页面布局变得混乱。第二行似乎与蓝色列重叠，我不知道为什么。

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
    <div class="carousel-inner">
        <div class="item active">
            <div >

            </div>
        </div>
    </div>
</div>

 <div class="container-fluid box">
  <div   class="row" id="triple">
    <div class="col-lg-4 one">
      <p>123</p>
    </div>
    <div class="col-lg-4 two">
      <p>456</p>
    </div>
    <div class="col-lg-4 three">
      <p>789</p>
    </div>
  </div>

  <div class="row" id="single">
    <div class="col-lg-4 four">
    </div>
    <div class="col-lg-4 four">
    </div>
    <div class="col-lg-4 four">
    </div>
</div>

【问题讨论】：

您有 #triple{height:100%;} 导致问题。您可以使用 media 查询来提及每个 col 的高度。
如何使用媒体查询使列堆叠？
希望这是您正在寻找的解决方案jsfiddle.net/vsk59tck/1
谢谢，这通过使用 height:auto 解决了我的问题。

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果你想要移动响应，你应该首先定位移动设备

  <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
        <div class="carousel-inner">
            <div class="item active">
                <div >

                </div>
            </div>
        </div>
    </div>

     <div class="container-fluid box">
      <div   class="row" id="triple">
        <div class="col-xs-4 one">
          <p>123</p>
        </div>
        <div class="col-xs-4 two">
          <p>456</p>
        </div>
        <div class="col-xs-4 three">
          <p>789</p>
        </div>
      </div>

      <div class="row" id="single">
        <div class="col-xs-4 four">
        </div>
        <div class="col-xs-4 four">
        </div>
        <div class="col-xs-4 four">
        </div>
    </div>

根据您的更新检查此fiddle

【讨论】：

@123123 能解决您的问题吗？
是的，它修复了它，但如果我这样做，整个布局就会变得流畅，不会像它应该的那样崩溃。我必须使用单独的课程吗？抱歉，我是 bootstrap 新手。
是的，我认为以移动设备为目标会使截止点更小，但是当它最终崩溃时，问题仍然如我所述。橙色行似乎与蓝色行重叠，并且不像应有的那样位于底部。
@123123 你编辑你的旧问题了吗？您是否希望中间行的列相互堆叠？例如红色/蓝色/绿色，或者它们应该在移动设备上排成一行，例如红-蓝-绿。
是的，他们应该堆叠红色蓝色绿色，然后是底部的橙色行。我不确定是什么导致了问题。谢谢你帮助我。

【解决方案2】：

这是你的解决方法：

HTML：

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
        <div class="carousel-inner">
            <div class="item active">
                <div >

                </div>
            </div>
        </div>
</div>
<div class="container-fluid box">
  <div   class="row" id="triple">
    <div class="col-lg-4 one">
      <p>123</p>
    </div>
    <div class="col-lg-4 two">
      <p>456</p>
    </div>
    <div class="col-lg-4 three">
       <p>789</p>
    </div>
</div>
<div class="row" id="single">
  <div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
    </div>
<div class="col-lg-4 four">
    </div>
</div>

CSS：

html, body{
    height: 100%;
  }
  .carousel, .item, .active, .carousel-inner{
    height: 100%;
  }

  .item>div{
    width: 100%;
    height: 100%;
  }

  .item:nth-child(1) > div {
    background-color: yellow;
  }

  .box{
    width: 100%;
    height: 100%;
    position:absolute;
    top:100%;
  }
  #triple{
    height: auto;
  }

  .col-lg-4  {
    height:100%;
  }
  .one, .two, .three{height: 50vh;}
  .one{ background-color:red;}
  .two{ background-color:blue;}
  .three{ background-color:green;}
  .four{ background-color:orange;}

  #single{
    height:50%;
    border:1px solid black;
  }
  @media (max-width: 767px){
    .one, .two, .three{height: 100vh;}
  }

小提琴：https://jsfiddle.net/vsk59tck/1/

【讨论】：