Question

我设计了这样一个网站：

<section>
  <div class="container-fluid container-full">
    <div class="row"> <!-- Row 1-->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
      <div class="first-row">Content</div>
    </div>
  </div>
</div>
</section>
<section>
<div class="container-fluid">
  <div class="row"> <!-- Row 2 -->
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 righ-left-panel"></div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 second-row">
    <div class="row">
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Content</div>
      <div class="col-xs-12 col-sm-12 col-md-8">Content</div>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 righ-left-panel"></div>
  </div>
</div>
</section>
<section>
<div class="container-fluid">
  <div class="row"> <!-- Row 3 -->
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 righ-left-panel"></div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 third-row">
    <div class="row">
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Content</div>
      <div class="col-xs-12 col-sm-12 col-md-8">Content</div>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 righ-left-panel"></div>
  </div>
</div>
</section>

它位于一个包装器内，它可以在大屏幕设备上完美地加载所有内容。

但是不能在不到700px的设备上工作。

第三行正好在第二行，完全覆盖它。

问题是什么，如何解决？

CSS

.first-row{
    background:url(../images/top-bg.jpg) no-repeat center top ;
    height: 420px;
    max-height: 420px !important;
    margin: 0 auto;
    width: 100%
    box-shadow: 1;
}

.second-row{
    height: 610px;
    width: 80%;
    min-height: 130px;
}

@media only screen and (min-width: 701px){
    .second-row{
        background: url(../images/ponebg.png) no-repeat 100% top;
        margin-top: -70px;  
        background-size: 100%;
    }
}

@media only screen and (max-width: 700px){
    .second-row{
        background: none;
        margin-top: 10px;
    }
}

.third-row{
    max-width: 1050px;
    height: 610px;
    /*alignment: center;*/
    width: 80%;
}

Answer 1

问题在于第2行和第3行中的2行，实际上不是“主”行。

看看这个：

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Content</div>
<div class="col-xs-12 col-sm-12 col-md-8">Content</div>

如果屏幕为sm或xs，这会告诉twitter引导程序将第二个内容行放在它自己的行上。将那两行的列号更改为总共12行，它们将保持在同一行。

你可以这样做：

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Content</div>
<div class="col-xs-8 col-sm-8 col-md-8">Content</div>

通常情况下，我会给你一个Bootply链接进行测试，但由于某些原因，此时此刻似乎已经失效了，所以这里有一个jsfiddle：http://jsfiddle.net/pgovggjy/

编辑：根据您添加CSS代码的更新问题，我的代码仍然有效。您遇到的问题可能与您尝试使用的图像的大小/类型有关。您可能希望将其上传到某处并提供其直接链接，如果它仍然无效。

以下是您可以使用的Bootply测试链接：http://www.bootply.com/Apeolkpnvh

Answer 2

问题在于行的高度。我修改了CSS

.first-row{
    background:url(../images/top-bg.jpg) no-repeat center top ;
    max-height: 420px !important;
    margin: 0 auto;
    width: 100%
    box-shadow: 1;
}

.second-row{
    width: 80%;
    min-height: 130px;
}

@media only screen and (min-width: 701px){
    .second-row{
        background: url(../images/ponebg.png) no-repeat 100% top;
        margin-top: -70px;  
        background-size: 100%;
    }
}

@media only screen and (max-width: 700px){
    .second-row{
        background: none;
        margin-top: 10px;
    }
}

.third-row{
    max-width: 1050px;
    /*alignment: center;*/
    width: 80%;
}

我删除了所有高度，它完美无缺！

移动设备上的一行位于另一行之下

2 个答案: