Html 移动版col-xs-6中一行两个框不工作

我使用的是bootstrap3。在桌面版中，我有四个盒子。但我想在移动版本中连续使用两个框，所以我使用了col-xs-6，但这个东西不起作用。我是新手，你们能帮我吗

这是我的手机版

我想要像这样，两个盒子在手机版中连成一行

我的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>

---

像这样对代码进行更改

#middleBoxMargin{
边缘顶部：80px；
}
#中间箱分区{
边缘底部：15px；
}
#中间盒>分区{
保证金：0自动；
边界半径：100%；
}
#团体保险{
宽度：145px；
高度：145px
背景色：#EEEEEE；
文本对齐：居中；
光标：指针；
}
#人寿保险{
宽度：145px；
高度：145x；
背景色：#EEEEEE；
文本对齐：居中；
光标：指针；
}
#牙齿保险{
宽度：145px；
高度：145px；
背景色：#EEEEEE；
文本对齐：居中；
光标：指针；
}
#替换保险{
宽度：145px；
高度：145px；
背景色：#EEEEEE；
文本对齐：居中；
光标：指针；
}

---

如果要使用引导网格，只需删除为容器添加的所有特定宽度：-

对于桌面使用col-md-4

用于移动屏幕col-xs-6<代码>

---

如果使用引导网格，则可以删除css中的宽度

width: 145px;

您可以覆盖引导css

width: 145px;