html - 移动版 col-xs-6 中连续两个框不起作用

Question

我正在使用 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;
}

Answer 1

如果您打算使用 Bootstrap 网格，只需删除为您的容器添加的所有特定宽度:-

用于桌面使用 col-md-4

用于移动屏幕 col-xs-6 <div id="groupInsurance" class="col-md-4 col-xs-6"></div>