Question

我正在开发一个仪表板＆amp;使用bootstrap进行响应式布局设计。我面临的问题是：我们将在div /列上有一个按钮，onclick会隐藏特定的div /列。需要的是，一旦我们将列隐藏在特定行中，下一行中的列应该出现在该行中例如：

| A | B |
| C | D |
这里让A B C D是列。如果B列被隐藏，我应该得到

| A | C |
| D |

如果A列被隐藏了。我应该得到

| B | C |
| D |

提前致谢!!!

Answer 1

<div class="container">   
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="a">A</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="b" style="display:none;">B</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="c">C</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="d">D</div>
  </div>
</div>

如果您现在隐藏一个列（在我的示例b中），它将向上移动。

Answer 2

您可以尝试使用行/行 - 流体div，并使用col-lg-6类。

而不是

<div class="row">
  <div class="col-lg-6">
  </div>
  <div class="col-lg-6">
  </div>
</div>

你只需使用

<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>

我不知道是否有副作用，但对我来说效果很好。

Bootstrap网格系统：隐藏任何列时自动对齐行和列

2 个答案: