时间戳

首页 > 解决方案 > 如何在引导程序的右侧添加 EMPTY col

twitter-bootstrap - 如何在引导程序的右侧添加 EMPTY col

问题描述

我想在 lg 屏幕上有这样的布局 =>

|   col 6   | | EMPTY col 6 |
|   col 6   | |    col 6    |

这在小屏幕上

我想在 <lg screen (no empty) => 上有这样的布局

|   col 12   | 
|   col 12   | 
|   col 12   |

但我不知道如何正确地做到这一点offset

我不能使用不同的行，因为它会破坏 MOBILE 上的布局。全屏检查代码段

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-12">
          Column
        </div>
        <div class="col-lg-6 col-12">
          Column
        </div>
        <div class="col-lg-6 col-12">
          Column
        </div>
      </div>
    </div>

如果我尝试在大中间行使用偏移量，它只会添加 12 的偏移量！

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-12">
          Column
        </div>
        <div class="col-lg-6 offset-lg-6 col-12">
          Column
        </div>
        <div class="col-lg-6 col-12">
          Column
        </div>
      </div>
    </div>

我发现的唯一方法是这个，但我确定有更好的方法吗？

如果我尝试在大中间行使用偏移量，它只会添加 12 的偏移量！

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-12">
          Column
        </div>
            <div class="col-lg-6 d-none d-lg-flex">
          EMPTY COL 
        </div>
        <div class="col-lg-6 offset-lg-6 col-12">
          Column
        </div>
        <div class="col-lg-6 col-12">
          Column
        </div>
      </div>
    </div>

标签： twitter-bootstrapbootstrap-4twitter-bootstrap-3

解决方案

如果您使用 bootstrap 3，则必须添加额外的 css，如下例所示。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    
    <style>
      .row-flex {
        display: flex;
        flex-wrap: wrap;
      }
    
      .w-100 {
        width: 100%;
      }
    </style>
    <div class="container">
      <div class="row row-flex">
        <div class="col-lg-6" style="background-color:yellow;">
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.
        </div>
        <div class="w-100"></div>
        <div class="col-lg-6" style="background-color:yellow;">
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.
        </div>
        <div class="col-lg-6" style="background-color:pink;">
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.
        </div>
      </div>
    </div>

推荐阅读