html - Bootstrap 元素被彼此吃掉

Question

enter image description here我需要您帮助我的 bootstrap 网站。我努力让它工作，但总是遇到这个恼人的网格问题？我不知道它到底是什么。如果我降低屏幕尺寸，输出会吃掉我的一些颜色框。 (使用 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>