javascript - Bootstrap 网格 : Is this correct to replace col-xs-6 + col-xs-6 with col-xs-12+ (col-xs-6 & display:none)?

Question

我很好奇替换是否正确

<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

与

<div class="col-xs-12">...</div>
<div class="col-xs-6" style="display:none;">...</div>

用javascript？

我所需要的只是隐藏第二个 div 并正确地通过 javascript 显示第一个 div 的 100%。实际完成的操作。问题是从 Twitter Bootstrap 的 Angular 来看，这是否是一种正确的方法。

Answer 1

Bootstrap 本身就是一个响应式框架。您可以在不使用 Javascript 的情况下实现上述结果。

代替写作

<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>

你可以写

<div class="col-sm-6 col-xs-12">...</div>
<div class="col-sm-6 hidden-xs">...</div>

在这里您可以分别使用 sm、md 和 lg 进行小型、中型和大型布局。

当您的屏幕大小调整为 xs 时，上面的代码会显示 100% 的第一个 div，而第二个 div 会被隐藏。

这是使用 Bootstrap 时更好的方法。