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

Posted 2023-03-21

【中文标题】如何在引导程序的右侧添加 EMPTY col

【英文标题】：How to add EMPTY col on the right in bootstrap

【发布时间】：2021-06-09 00:40:54

【问题描述】：

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

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

这个在小屏幕上

我想在

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

但我不知道如何正确使用offset

我不能使用不同的行，因为它会破坏 MOBILE 上的布局。在全屏

中检查sn-p

    <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>

【参考方案1】：

如果您使用 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>

【讨论】：

这是相同的 hack，但使用的是 w-100，

你想要什么

【参考方案2】：

这里是你问的一个版本。在 Bootstrap 3 中没有 flex-box。

<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-xs-12 col-lg-6">
          Column
        </div>
        <div class="visible-lg-6">
        </div>
        <div class="col-xs-12 col-lg-6">
          Column
        </div>
        <div class="col-xs-12 col-lg-6">
          Column
        </div>
      </div>
    </div>