html - 开始隐藏（基于父元素）会用 Bootstrap 4 弄乱孩子的样式

Question

我想向影响许多内部元素的父 DIV 添加一个类。但是当我使用 Bootstrap 执行此操作时，样式会变得混乱。

此代码显示了 2 上的问题，您可以看到底部边框未对齐。如果我只是在元素上执行 .toggle(".second") ，它将起作用。

https://www.bootply.com/KOJ4VKNbOa

.second {
   display: none;
}

.show-inner .second {
    display: block;
} 

   <div id="outer">
      <table class="table">
        <thead>
          <tr>
            <th class="first">A</th>
            <th class="second">B</th>
            <th class="third">C</th>  
          </tr>
        </thead>
        <tbody>
          <tr>
            <td width="98%" class="first">1</td>
            <td width="1%" class="second">2</td>
            <td width="1%" class="third">3</td>
          </tr>
        </tbody>
      </table>
    </div>

    <button onclick="$('#outer').toggleClass('show-inner');">Toggle .second</button>

在我的项目中，我希望有许多外部 DIV 类的依赖项，因此让它工作将为我节省大量代码。

标签： htmlcssbootstrap-4

Answer 1

使用 display: table-cell 代替块。

.show-inner .second {
    display: table-cell;
}