我正在尝试在boostrap中实现此网格系统,但我未能实现它。这就是我想要实现的目标
但是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的高度,因此页脚不会与我的内容重叠。
一切都在全屏模式下工作。当我检查响应模式时,div彼此重叠。
这是我的css
#wrapper{
height:1300px;
}
.col-centered{
margin: 0 auto
}
答案 0 :(得分:-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>