引导所有设备在同一行中的两列

Posted 2023-03-06

【中文标题】引导所有设备在同一行中的两列

【英文标题】：bootstrap two column in same line all devices

【发布时间】：2020-01-30 08:58:37

【问题描述】：

我正在尝试在同一行中使用两个列分区。

检查我的代码：

<div class="col-md-12">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      Left Div
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      Right Div
    </div>
  </div>
</div>

这个结构响应直到 574px。但是当我在 574px 之后减小浏览器大小时，分割显示为两行。但我的要求显示在同一行（左和右）

请查看上图。那个问题。

【问题讨论】：

嗨@gihankumara，如果您使用的是 bootstrap 4，那么请了解 bootstrap 4 的网格系统。 Bootstrap 3 和 Bootstrap 4 的网格系统不同。您正在使用 bootstrap 3 的移动类。 col-xs-* 不在 bootstrap 4 中。在 Bootstrap 4 for mobile col-* 类中。

【参考方案1】：

您可以使用col class 为每个屏幕设置相同的分栏

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col bg-success">
          Left Div
        </div>
        <div class="col bg-warning">
          Right Div
        </div>
    </div>
  </div>
</div>

bg-success 和 bg-warning 仅用于颜色

【讨论】：

我发现了这个问题。根据问题，我想在没有“容器流体”类的情况下做到这一点。可能吗。 ??

【参考方案2】：

<div class="col-12 ">
  <div class="row">
    <div class="col-6">
      Left Div
    </div>
    <div class="col-6">
      Right Div
    </div>
 </div>