Bootstrap 4 在列之前创建 div [重复]答案

【问题标题】：Bootstrap 4 create div before column [duplicate]Bootstrap 4 在列之前创建 div [重复]
【发布时间】：2018-10-17 07:07:21
【问题描述】：

我正在使用新的 Bootstrap 4，我需要在引导列之前创建一个 DIV，以便在按下按钮时隐藏或显示列。

所以我需要的是这样的：

<div class="container">
    <div class="row">
        <div class="menu-page" data-page="1">
            <div class="col-lg-6" style="background-color: red; height: 200px;">
            </div>
            <div class="col-lg-6" style="background-color: yellow; height: 200px;">
            </div>
        </div>
        <div class="menu-page" data-page="2">
            <div class="col-lg-6" style="background-color: red; height: 200px;">
            </div>
            <div class="col-lg-6" style="background-color: yellow; height: 200px;">
            </div>
        </div>
    </div>
</div>

但是当我创建它时，col-lg-6 div 会丢失所有引导属性。

当按下按钮时，我需要它来显示，使用 javascript，带有与该按钮关联的数据页的 div 并隐藏其他按钮。

我怎样才能创建这个？还是有更简单的方法来做到这一点？

【问题讨论】：

显示代码如何添加 div？
可能是container > row > 2 times col-12 (where menu-page is) > row > 2 times col-lg-6?
制作两个.rows 而不是一个，并将.menu-page 类和data-page 属性添加到.rows。这样你就不需要包装 div，布局也不会乱七八糟。
将col-lg-12 类名赋予menu-page
你为什么不给你的专栏增加一门课呢？你可以隐藏它。

标签： javascript html css bootstrap-4

【解决方案1】：

实际上，Bootstrap 4 会逐行忽略任何新类。它只接受 bootstrap col 但如果您仍然想要该类，那么您可以添加以下 css：

.menu-page {
    display: flex;
    width: 100%;
}

如果您想在移动设备中使用不同的样式，则可以更改 css

【讨论】：

【解决方案2】：

制作两个.rows 而不是一个，并将.menu-page 类和data-page 属性添加到.rows。这样你就不需要包装 div，布局也不会乱七八糟。

<div class="container">
   <div class="row menu-page" data-page="1">
        <div class="col-lg-6" style="background-color: red; height: 200px;">
        </div>
        <div class="col-lg-6" style="background-color: yellow; height: 200px;">
        </div>
    </div>
    <div class="row menu-page" data-page="2">
        <div class="col-lg-6" style="background-color: red; height: 200px;">
        </div>
        <div class="col-lg-6" style="background-color: yellow; height: 200px;">
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

试试这个：

<div class="container">
    <div class="row" data-page="1">
        <div class="menu-page col-lg-12">
            <div class="col-lg-6" style="background-color: red; height: 200px;">
            </div>
            <div class="col-lg-6" style="background-color: yellow; height: 200px;">
            </div>
        </div>
    </div>
    <div class="row" data-page="2">
        <div class="menu-page col-lg-12">
            <div class="col-lg-6" style="background-color: red; height: 200px;">
            </div>
            <div class="col-lg-6" style="background-color: yellow; height: 200px;">
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案4】：

这将帮助您实现您想要的相同风格。

<div class="container">
   <div class="row">
      <div class="menu-page col-lg-12" data-page="2">
         <div class="col-lg-6" style="background-color: red; height: 200px;">
         </div>
         <div class="col-lg-6" style="background-color: yellow; height: 200px;">
          </div>
       </div>
    </div>
</div>

【讨论】：