如何使用移动设备的引导程序并排对齐 div？ [复制]

Posted 2023-03-05

【中文标题】如何使用移动设备的引导程序并排对齐 div？ [复制]

【英文标题】：how to align div side by side using bootstrap for mobile? [duplicate]

【发布时间】：2021-07-04 08:07:32

【问题描述】：

我知道使用下面的引导程序我可以轻松地将 div 并排对齐，但它只适用于桌面而不适用于移动设备。

<div class="container">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

演示：click here to see

桌面输出：

移动输出

如您所见，当它击中765 x 645 @media_property 时，列水平堆叠 那么，如何才能像在桌面模式下一样并排显示移动设备中的列呢？

【问题讨论】：

由于您使用的是 Bootstrap 3，请将您的列定义为 col-xs-6。

@RichDeBourke，已标记 Bootstrap 4。

@isherwood 是的！

@isherwood - 问题 is 标记为 bootstrap-4，但 W3Schools 上的 demo 正在运行 Bootstrap 3.4.1。

对不起，这是我的错。

【参考方案1】：

将您的列定义为 col-6 col-sm-6 col-md-6 col-lg-6 以在每个设备中并排显示它们

【讨论】：

没明白你的意思可以详细说明吗？

Bootstrap 4 中不存在那些 xs 类。请参阅 ***.com/questions/41794746/…。

这些类在 Boostrap 4 中工作，除了 col-xs-6。只需将 class= "col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" 写到你的两列:)

我很感激，感谢克里斯特尔回答我的问题，谢谢大家......特别是isherwood:)

【参考方案2】：

这个问题here 归功于这个@tao。

col-xs-* 已被删除为 Bootstrap 4 以支持 col-*。

将col-xs-12 替换为col-12，它将按预期工作。

另请注意 col-xs-offset-n 在 v4 中已替换为 offset-n。

所以经过一些改动...... col-sm-6 到 col-6

 <div class="container">
          <h1>Hello World!</h1>
          <div class="row">
            <div class="col-6" style="background-color:yellow;">
              <p>Lorem ipsum...</p>
            </div>
            <div class="col-6" style="background-color:pink;">
              <p>Sed ut perspiciatis...</p>
            </div>
          </div>
        </div>

演示 v4：here