时间戳

首页 > 解决方案 > 两行十列（LG）和其他宽度的普通列

bootstrap-4 - 两行十列（LG）和其他宽度的普通列

问题描述

我想在 2 行中显示 10 列（对于 XL/LG），并为其他维度使用普通 col（MD：col-md-4 / SM：col-sm-6）

我可以使用两个来展示我想要的 LG，<div class="row">但对于 MD/SM 尺寸，这是有问题的，因为我会有交错的显示和空格。

示例 1：LG 可以，但 MD/SM 不行

<div class="row">
    <div class="col-lg col-md-4 col-sm-6">1</div>
    <div class="col-lg col-md-4 col-sm-6">2</div>
    <div class="col-lg col-md-4 col-sm-6">3</div>
    <div class="col-lg col-md-4 col-sm-6">4</div>
    <div class="col-lg col-md-4 col-sm-6">5</div>
</div>
<div class="row">
    <div class="col-lg col-md-4 col-sm-6">6</div>
    <div class="col-lg col-md-4 col-sm-6">7</div>
    <div class="col-lg col-md-4 col-sm-6">8</div>
    <div class="col-lg col-md-4 col-sm-6">9</div>
    <div class="col-lg col-md-4 col-sm-6">10</div>
</div>

示例 2：MD/SM 可以，但 LG 不行

<div class="row">
    <div class="col-lg col-md-4 col-sm-6">1</div>
    <div class="col-lg col-md-4 col-sm-6">2</div>
    <div class="col-lg col-md-4 col-sm-6">3</div>
    <div class="col-lg col-md-4 col-sm-6">4</div>
    <div class="col-lg col-md-4 col-sm-6">5</div>
    <div class="col-lg col-md-4 col-sm-6">6</div>
    <div class="col-lg col-md-4 col-sm-6">7</div>
    <div class="col-lg col-md-4 col-sm-6">8</div>
    <div class="col-lg col-md-4 col-sm-6">9</div>
    <div class="col-lg col-md-4 col-sm-6">10</div>
</div>

标签： bootstrap-4

解决方案

可以为每个断点应用分栏符。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="row">
  <div class="col-lg col-md-4 col-sm-6">1</div>
  <div class="col-lg col-md-4 col-sm-6">2</div>
  <div class="col-lg col-md-4 col-sm-6">3</div>
  <div class="col-lg col-md-4 col-sm-6">4</div>
  <div class="col-lg col-md-4 col-sm-6">5</div>

  <!-- Force next columns to break to new line at lg breakpoint and up -->
  <div class="w-100 d-none d-lg-block"></div>

  <div class="col-lg col-md-4 col-sm-6">6</div>
  <div class="col-lg col-md-4 col-sm-6">7</div>
  <div class="col-lg col-md-4 col-sm-6">8</div>
  <div class="col-lg col-md-4 col-sm-6">9</div>
  <div class="col-lg col-md-4 col-sm-6">10</div>
</div>

推荐阅读