twitter-bootstrap - Twitter Bootstrap - 包装网格列问题

Question

我在使用最新的 Twitter Bootstrap 4.5 时遇到问题。我正在从以前版本的 TB 迁移，可以这样做：

<div class="row">
<div id="wrapper_1">
<div class="col-sm-6">Column A</div>
<div class="col-sm-6">Column B</div>
</div>
<div id="wrapper_2">
<div class="col-sm-4">Column A</div>
<div class="col-sm-4">Column B</div>
<div class="col-sm-4">Column C</div>
</div>
</div>

上面明显的场景是客户端隐藏/显示 wrapper_1 与 wrapper_2。然而，TB 现在期望 div 列元素是该行的直接子元素，因此列布局丢失。有解决方法吗？

卡尔..

标签： twitter-bootstrap

Answer 1

完全支持嵌套。您必须确保在嵌套时保持 .row .col 排列，以便将原始代码示例更改为：

<div class="row">
  <div class="col-12">
    <div id="wrapper_1" class="row">
      <div class="col-sm-6">Column A</div>
      <div class="col-sm-6">Column B</div>
    </div>
  </div>
  <div id="wrapper_2" class="row">
    <div class="col-sm-4">Column A</div>
    <div class="col-sm-4">Column B</div>
    <div class="col-sm-4">Column C</div>
  </div>
</div>