Javascript 引导4在列之前创建div

我正在使用新的引导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 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>

---

这将帮助您实现与所需样式相同的样式

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

试试这个：

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

试试这个：

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

---

制作两个

.row

s而不是一个，并将

菜单页

类和

数据页

属性添加到

行

s。这样你就不需要包装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>

---

制作两个

.row

s而不是一个，并将

菜单页

类和

数据页

属性添加到

行

s。这样你就不需要包装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>

---

实际上，引导程序4会忽略第行之后的任何新类。它只接受bootstrap col，但如果仍然需要该类，则可以添加以下css：

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

---

如果你想在手机中使用不同的样式，那么你可以更改css，实际上Bootstrap4会忽略行后的任何新类。它只接受bootstrap col，但如果仍然需要该类，则可以添加以下css：

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

---

如果你想在手机中使用不同的样式，那么你可以更改css，显示你如何添加div的代码？可能是

container>row>2倍col-12（菜单页面所在位置）>row>2倍col-lg-6

？制作两个

.row

s而不是一个，并将

菜单页

类和

数据页

属性添加到

行

s。那么你就不需要包装div了，布局也不会乱七八糟。给

col-lg-12

类名到

菜单页

为什么不给你的专栏加一个类呢？您可以隐藏它。向代码显示如何添加div？可能是

container>row>2倍col-12（菜单页所在的位置）>row>2倍col-lg-6

？制作两个

.row

s而不是一个，并将

.menu page

类和

数据页

属性添加到

.row

中。那么你就不需要包装div了，布局也不会乱七八糟。给

col-lg-12

类名到

菜单页

为什么不给你的专栏加一个类呢？你可以把它藏起来。