开始隐藏(基于父元素)使用Bootstrap 4弄乱了孩子的样式

我想向父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类有很多依赖关系,因此使其工作将节省大量代码。

gg85806539 回答:开始隐藏(基于父元素)使用Bootstrap 4弄乱了孩子的样式

使用显示:表格单元而不是块。

.show-inner .second {
    display: table-cell;
} 
本文链接:https://www.f2er.com/3145200.html

大家都在问