我正在使用 bootstrap 3。在桌面版中我有四个连续的盒子。但是我想在移动版中连续放置两个盒子,所以我使用了 col-xs-6 但这东西不起作用。我是 bootstrap 的新手,你们能帮帮我吗。
我的 HTML
<div class="container">
<div class="row">
<div class="col-sm-12" id="middleBoxMargin">
<div id="middleBox">
<div id="groupInsurance" class="col-xs-6 group-insurance"></div>
<div id="lifeInsurance" class="col-xs-6 life-insurance"></div>
<div id="dentalInsurance" class="col-xs-6 dental-insurance"></div>
<div id="replacementInsurance" class="col-xs-6 replacement-insurance"></div>
</div>
</div>
</div>
</div>
我的 CSS
#middleBoxMargin {
margin-top: 80px;
}
#middleBox {
display: flex;
justify-content: center;
}
#groupInsurance {
float: left;
width: 145px;
height: 125px;
background-color: #EEEEEE;
text-align: center;
cursor: pointer;
}
#lifeInsurance {
float: left;
width: 145px;
height: 125px;
background-color: #EEEEEE;
text-align: center;
margin-left: 15px;
cursor: pointer;
}
#dentalInsurance {
float: left;
width: 145px;
height: 125px;
background-color: #EEEEEE;
text-align: center;
margin-left: 15px;
cursor: pointer;
}
#replacementInsurance {
float: left;
width: 145px;
height: 125px;
background-color: #EEEEEE;
text-align: center;
margin-left: 15px;
cursor: pointer;
}
最佳答案
如果您打算使用 Bootstrap 网格,只需删除为您的容器添加的所有特定宽度:-
用于桌面使用 col-md-4
用于移动屏幕 col-xs-6 <div id="groupInsurance" class="col-md-4 col-xs-6"></div>
关于html - 移动版 col-xs-6 中连续两个框不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50086396/