Question

enter image description here我的引导网站需要您的帮助。我一直在努力使其工作，但总是遇到这个烦人的网格问题？我不知道到底是什么。如果我减小屏幕尺寸，输出将占用我的一些颜色框。（使用Firefox，Bootstrap）

.row {

  width:100%;
  height:15rem;
  background-color: green;
  margin:0 auto;
  margin-top: 3%;


}

.container{
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.col-md-4{
  position: relative;

  padding:5px;
  height:100%;
}

.col-md-12{
  height:100%;

}

<div class="container">
 <h1>Hello World!</h1>

 <div class="row">

   <div class="col-md-4" style="background-color:yellow;">
     <div class="col-md-12" style="background-color:lightyellow;">
       <p>Lorem ipsum...</p>
     </div>
   </div>

   <div class="col-md-4" style="background-color:red;">
     <div class="col-md-12" style="background-color:darkred;">
       <p>Lorem ipsum...</p>
     </div>
   </div>

   <div class="col-md-4" style="background-color:blue;">
     <div class="col-md-12" style="background-color:lightblue;">
       <p>Lorem ipsum...</p>
     </div>
   </div>

 </div>

 <div class="row">

   <div class="col-md-4" style="background-color:purple;">
     <div class="col-md-12" style="background-color:red;">
       <p>Lorem ipsum...</p>
     </div>
   </div>

   <div class="col-md-4" style="background-color:pink;">
     <div class="col-md-12" style="background-color:yellow;">
       <p>Lorem ipsum...</p>
     </div>
   </div>

   <div class="col-md-4" style="background-color:lightblue;">
     <div class="col-md-12" style="background-color:blue;">
       <p>Lorem ipsum...</p>
     </div>
   </div>

 </div>
</div>

正如您在下面的图片中看到的那样，第二行和第三项隐藏在下一行之下。我做错了什么？减小显示尺寸后，应该彼此对齐。里面应该有6个框，但只能显示4个框。Full view should looks like this elemts got eaten by each other why?Small view for smartpone

红色框后面是其他隐藏物。我尝试了很多，却失败了。也许有人可以帮助我。

left and right white space

Answer 1

该行的高度引起您的问题。您可以将高度移动到列上（或者，如果您不需要像这样扩展它们，则将其完全删除）。

.row {
  width: 100%;
  background-color: green;
  margin: 0 auto;
  margin-top: 3%;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.col-md-4 {
  position: relative;
  padding: 5px;
  height: 15rem;
}

.col-md-12 {
  height: 15rem;
}

<div class="container">
  <h1>Hello World!</h1>

  <div class="row">

    <div class="col-md-4" style="background-color:yellow;">
      <div class="col-md-12" style="background-color:lightyellow;">
        <p>Lorem ipsum...</p>
      </div>
    </div>

    <div class="col-md-4" style="background-color:red;">
      <div class="col-md-12" style="background-color:darkred;">
        <p>Lorem ipsum...</p>
      </div>
    </div>

    <div class="col-md-4" style="background-color:blue;">
      <div class="col-md-12" style="background-color:lightblue;">
        <p>Lorem ipsum...</p>
      </div>
    </div>

  </div>

  <div class="row">

    <div class="col-md-4" style="background-color:purple;">
      <div class="col-md-12" style="background-color:red;">
        <p>Lorem ipsum...</p>
      </div>
    </div>

    <div class="col-md-4" style="background-color:pink;">
      <div class="col-md-12" style="background-color:yellow;">
        <p>Lorem ipsum...</p>
      </div>
    </div>

    <div class="col-md-4" style="background-color:lightblue;">
      <div class="col-md-12" style="background-color:blue;">
        <p>Lorem ipsum...</p>
      </div>
    </div>

  </div>
</div>

引导元素被彼此吞噬

1 个答案: