Bootstrap嵌套的列網格不能正常工作

我想在boostrap中實現這個網格系統，但是我未能實現它。這就是我想實現Bootstrap嵌套的列網格不能正常工作

但div的相互重疊這樣

這是我的代碼。

<div class="container"> 
    <div class="row"> 
    <div id="wrapper"> 
      <div class="col-md-12 colHeight topSpace"> 
     <div class="row"> 
      <div class="col-md-3 text-center"> 

      </div> 
       <div class="col-md-6 text-center"> 
      <div class="posRel"> 

       <p class="col-centered"> 
         <Button class="button-0 red" onClick="hintWord()">Hint</Button> 
         </p> 
      </div> 
    </div> 

       <div class="col-md-3 text-center"> 

       <div class="imageArea"> 
      <div class="imageError">It is Working<img src="images/new.png"></div> 
      <div class="imageSuccess"><img src="images/test.png"></div> 
      </div> 
     </div> 
     </div> 

     </div> 
        </div> 

     </div> 
     </div>

我已經給包裝提供了1300px的高度，所以頁腳不會與我的內容重疊。

一切工作在全屏模式。當我檢查響應模式時，divs彼此重疊。

這是我的CSS

#wrapper{ 
height:1300px; 
} 

.col-centered{ 

margin: 0 auto 

}

來源

2016-04-21 mod geek

-1

<body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-3 text-center"> 
 

 
      </div> 
 
      <div class="col-md-6 text-center"> 
 
       <div class="posRel"> 
 

 
        <p class="col-centered"> 
 
         <Button class="button-0 red" onClick="hintWord()">Hint</Button> 
 
        </p> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-3 text-center"> 
 
       <div class="imageArea"> 
 
        <div class="imageError">It is Working<img src="images/new.png"></div> 
 
        <div class="imageSuccess"><img src="images/test.png"></div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2016-04-21 12:46:04

沒有，這是不恰當的 –

Bootstrap嵌套的列網格不能正常工作

回答

相關問題