我正在尝试使用Bootstrap存档这样的东西:
而我正在接受这个:
这是我的HTML:
<div id="layout" class="container">
<div class="row col-md-12">
<div class="col-md-6" style="min-height: 100px;border: 1px white solid;background-color: #4986e7;"></div>
<div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div>
</div>
<div class="row col-md-12">
<div class="col-md-offset-6 col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div>
</div>
<div class="row col-md-12">
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #f83a22;"></div>
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #fa573c;"></div>
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #f83a22;"></div>
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #fa573c;"></div>
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #ffad46;"></div>
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: purple;"></div>
</div>
</div>
我的CSS:
.row {
background-color: transparent;
border: 0;
}
我尝试更改div的边距和填充,内联样式以及单独的样式表,col-lg- ,col-sm - ,但我得到的结果相同。有人能指出我正确的方向,我应该从哪里开始寻找解决方法?
谢谢。
答案 0 :(得分:5)
嘿,我认为你只想在第一行col-md-12中嵌入第二个绿色列,而不是将它放在自己的第一行中。就像这样:
<div class="row col-md-12">
<div class="col-md-6" style="min-height: 100px;border: 1px white solid;background-color: #4986e7;"></div>
<div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div>
<div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div>
</div>
查看我对你自己小提琴的修改
答案 1 :(得分:3)
<div class="row col-md-12">
- 将强制每个嵌套项目都在其中。
因此,当您添加另一行,您想要共享上一行(第二个绿色)时 - 您不希望将其放在新的row
中 - 而是让它共享同一行,删除它的偏移量,它会很棒!
<div id="layout" class="container">
<div class="row col-md-12">
<div class="col-md-6" style="float: left; min-height: 100px;border: 1px white solid;background-color: #4986e7;"></div>
<div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div>
<div class="col-md-6" style="min-height: 50px;border: 1px white solid;background-color: #16a765;"></div></div>
<div class="row col-md-12">
</div>
<div class="row col-md-12">
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #f83a22;"></div>
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #fa573c;"></div>
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #f83a22;"></div>
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #fa573c;"></div>
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: #ffad46;"></div>
<div class="col-md-2" style="min-height: 50px;border: 1px white solid;background-color: purple;"></div>
</div>
</div>
答案 2 :(得分:0)
Here is my HTML
<div class="container" id="layout">
<div class="row col-md-12">
<div style="min-height: 100px; border: 1px solid white; background-color: rgb(73, 134, 231); width: 50%; float: left;" class="col-md-6"></div>
<div style="min-height: 50px; border: 1px solid white; background-color: rgb(22, 167, 101); width: 50%; float: left;" class="col-md-6"></div>
<div style="min-height: 50px; border: 1px solid white; background-color: rgb(22, 167, 101); width: 50%; float: left;" class="col-md-6"></div>
</div>
<div class="row col-md-12">
<div style="min-height: 50px;border: 1px white solid;background-color: #f83a22;" class="col-md-2"></div>
<div style="min-height: 50px;border: 1px white solid;background-color: #fa573c;" class="col-md-2"></div>
<div style="min-height: 50px;border: 1px white solid;background-color: #f83a22;" class="col-md-2"></div>
<div style="min-height: 50px;border: 1px white solid;background-color: #fa573c;" class="col-md-2"></div>
<div style="min-height: 50px;border: 1px white solid;background-color: #ffad46;" class="col-md-2"></div>
<div style="min-height: 50px;border: 1px white solid;background-color: purple;" class="col-md-2"></div>
</div>
</div>