Bootstrap elemnts互相吃掉
Bootstrap elemnts互相吃掉
提问于 2019-06-03 23:47:52
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>
正如你在下面的图片中看到的，2end和3th项隐藏在下一行的下面。我哪里做错了？在我降低显示尺寸后，应该在另一个下面排成一排。里面应该有6个框，但它只显示了其中的4个。Full view should looks like this elemts got eaten by each other why?Small view for smartpone
在红色的盒子后面是一些其他的隐藏。我试了很多，但失败得很厉害。也许有人能帮我。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-03 23:59:58
行的高度导致了您的问题。您可以将高度移动到列上(或者，如果不需要像那样展开列，则将其完全删除)。
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56430656
复制相关文章
相似问题