开始隐藏(基于父元素)会用Bootstrap 4打乱孩子的风格

Question

我想向影响许多内部元素的父div添加一个类。但当我用Bootstrap做这件事时，造型会变得一团糟。

这段代码显示了2上的问题，您可以看到底部边界错位。如果我只是在元素上做一个.thoggle(".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类的依赖项，所以让它工作将为我节省大量代码。

Answer 1

使用display:table单元格而不是块。

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