如何让Bootstrap的col-lg-3 div在移动端两两相邻？

嘿，这个需求很好实现！你用的是Bootstrap栅格系统对吧？col-lg-3只定义了大屏设备下的布局，要让移动端呈现两两相邻的效果，只需要给每个div补充对应移动端的列类就行。

核心思路是：

• 保留col-lg-3不变，确保桌面端四个区块各占25%宽度，并排显示
• 新增移动端专属列类，让每个区块在小屏幕下占50%宽度，自然实现两两相邻排列

分Bootstrap版本给出代码示例： #

如果使用Bootstrap 3：

<div class="col-lg-3 col-xs-6"> Some html </div>
<div class="col-lg-3 col-xs-6"> Some html </div>
<div class="col-lg-3 col-xs-6"> Some html </div>
<div class="col-lg-3 col-xs-6"> Some html </div>

col-xs-6会让屏幕宽度小于768px时，每个区块占50%宽度，自动分成两行、两两并排。

如果使用Bootstrap 4或5：

<div class="col-lg-3 col-6"> Some html </div>
<div class="col-lg-3 col-6"> Some html </div>
<div class="col-lg-3 col-6"> Some html </div>
<div class="col-lg-3 col-6"> Some html </div>

Bootstrap 4+里，col-6对应超小屏幕（<576px）的布局，效果和上面完全一致。

额外小提示： #

如果想要在平板尺寸（比如768px-991px）也设置自定义布局，还可以追加col-md-*或col-sm-*类。比如加个col-md-4，就能让平板设备下三个区块并排显示，完全可以按需调整~

内容的提问来源于stack exchange，提问作者TamerB