时间戳

首页 > 解决方案 > 引导所有设备在同一行中的两列

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

问题描述

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

检查我的代码：

<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 之后减小浏览器大小时，分割显示为两行。但我的要求显示在同一行（左和右）

问题

请检查上图。那个问题。

标签： csstwitter-bootstrapbootstrap-4responsive

解决方案

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

<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 仅用于颜色

推荐阅读