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嵌套的列网格不能正常工作

回答

相关问题