Question

看看其他SO问题，我设法让左边的div跨越整个页面，但不是正确的div。我该如何解决这个问题？

HTML：

<div class="container-fluid">

 <div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6">

    <div id="kpop" class="selection">

    </div>


    <div id="fashion" class="selection">

    </div>

 </div>


 <div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6">

   <div id="martialarts" class="selection">

   </div>

   <div id="nature" class="selection">

   </div>

 </div>

</div>

CSS：

body .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.selection {
  height: 50vh;
}

这是一个演示： http://codepen.io/davegumba/pen/QNzpey

Answer 1

您没有将col类包装在行标记中。例如，如果它们都是6，则您也不需要指定所有视口大小。如果您没有指定，Col-xs-6将适用于更高的所有尺寸。

http://codepen.io/ruchiccio/pen/oxJWLQ

<div class="container-fluid">

  <div class="row">

    <div id="kpop" class="selection col-xs-6">
    </div>
    <!--kpop-->

    <div id="fashion" class="col-xs-6 selection">
    </div>
    <!--fashion-->

  </div>
  <!--first column-->
  <div class="row">

    <div id="martialarts" class="col-xs-6 selection">
    </div>
    <!--martial arts-->

    <div id="nature" class="selection col-xs-6"> </div>
    <!--nature-->

  </div>
  <!--second column-->

</div>
<!--container-->

Answer 2

问题不在于代码本身，而在于HTML的结构。为了正确使用Bootstrap，您需要一行来包装列。你现在拥有的是行和列都在同一个。另外，作为旁注，最好的做法是从最小的屏幕开始定义，然后按照移动优先的方式一直运行到更大的屏幕。

以下是使用建议的更改重写代码的方法：

<div class="container-fluid">
<div class="row">   
    <div class="col-xs-6">
        <div id="kpop" class="selection">

        </div>
        <div id="fashion" class="selection">

        </div>          
    </div>
    <!-- End col -->
    <div class="col-xs-6">
        <div id="martialarts" class="selection">

        </div>
        <div id="nature" class="selection">

        </div>  
    </div>
    <!-- End col -->
</div>
<!-- End row -->
</div>
<!-- End container-fluid -->

您应该记住的另一件事是，由于Bootstrap是移动优先的，因此您无需重复列定义，因为它们会自动波动起来。例如，您为xs，s，m和l屏幕定义了6个块的列，但您只需要为xs定义它，因为它将自动应用于所有较大的屏幕（s，m，l），除非它被覆盖。

Answer 3

你不应该在col中使用twitter bootstrap的“row”。行类是关于行而不是列的。所以每边都有负利润。这就是让你的50％回报率降低的原因。

摆脱类行，它将被修复。或者如果你想保留它，删除两列两侧的负边距

Answer 4

您可以通过删除＆＃34;行＆＃34;来解决此问题。列中的类，然后删除列上的填充。＆＃34;行＆＃34; class应该用作列的容器。虽然我发现即使使用它有时也不能正常工作，但它并不合适。此外，正如其他人所说，您不需要使用多个列大小。您需要根据希望内容在较小视口宽度处执行的操作来选择大小。

<div class="container-fluid">

  <div class="col-xs-6">
    <div id="kpop" class="selection">

    </div>
    <!--kpop-->

    <div id="fashion" class="selection">

    </div>
    <!--fashion-->

  </div>
  <!--first column-->

  <div class="col-xs-6">
    <div id="martialarts" class="selection">

    </div>
    <!--martial arts-->

    <div id="nature" class="selection">

    </div>
    <!--nature-->

  </div>
  <!--second column-->

</div>
<!--container-->

样式：

    .col-lg-6, col-md-6, col-sm-6, col-xs-5 {
      margin: 0;
      padding: 0;
     }

Answer 5

检查代码似乎问题与您使用.row的类行margin-right and margin left = -15px;这一事实有关将两者都设为0

.row {
    margin-right: 0px;
    margin-left: 0px;
}

Answer 6

我这样做了：

基本上，删除了行类并为所有列类添加了no-padding类。

http://codepen.io/anon/pen/mPamEZ

<div class="container-fluid">


  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding">
    <div id="kpop" class="selection">

    </div>
    <!--kpop-->

    <div id="fashion" class="selection">

    </div>
    <!--fashion-->

  </div>
  <!--first column-->

  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding">
    <div id="martialarts" class="selection">

    </div>
    <!--martial arts-->

    <div id="nature" class="selection">

    </div>
    <!--nature-->

  </div>

  <!--second column-->

</div>
<!--container-->



body .container-fluid {
  padding-left: 0;
  padding-right: 0;
  background-color:#ccc
}

.selection {
    height: 50vh;

}

#kpop {
    background: #7BECED;
}

#fashion {
    background: #FFB5A7;
}

#martialarts {
    background: #F3BB72;
}

#nature {
    background: #B1DC76;
}
.no-padding{ padding-left: 0;
  padding-right: 0;}

Answer 7

您只需将margin中的padding和.col-xs-6重置为0.此外，我将您的标记添加 - .row类应该包装.col-类。看看Bootstrap documentation of grid system。

Here它是。

＆＃13;

body .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.full-width {
  margin: 0;
  padding: 0;
}
.selection {
  height: 50vh;
}
#kpop {
  background: #7BECED;
}
#fashion {
  background: #FFB5A7;
}
#martialarts {
  background: #F3BB72;
}
#nature {
  background: #B1DC76;
}

＆＃13;

<div class="container-fluid">

  <div class="row">
    <div class="full-width col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div id="kpop" class="selection">

      </div>
      <!--kpop-->

      <div id="fashion" class="selection">

      </div>
      <!--fashion-->

    </div>
    <!--first column-->
    <div class="full-width col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div id="martialarts" class="selection">

      </div>
      <!--martial arts-->

      <div id="nature" class="selection">

      </div>
      <!--nature-->

    </div>
    <!--second column-->
  </div>

</div>
<!--container-->

＆＃13;

请注意，此更改可能会触及您网页中的其他div。

P.S最好创建新类，例如full-width并赋予它相同的规则。这不会打破你的页面。 JSFiddle

Div不跨越整个宽度。

7 个答案: