css - 根据屏幕尺寸使用 .container-fluid 调整 .container

Question

这里是 Bootstrap 向导面临的挑战:如何根据屏幕尺寸在 .container 和 .container-fluid 之间切换我的布局。 IE。在移动设备上，我需要液体，否则使用普通容器。

<!-- pseudo class definition to exemplify -->
<div class="container-fluid-xs-only container-sm-and-up">
  
  <div class="row">
    ...
  </div>
</div>

免责声明:我现在正在做的解决方法是使用媒体查询调整边距。 IE。使用 .container 并在移动设备上添加负边距。想知道是否有更好的方法来实现这一目标。

要求:理想情况下我想要一个纯基于css的解决方案，如果真的不可能，请考虑我使用的是angular 1.x。

PS:我不想复制“行”中的内容，换句话说，我对使用重复内容执行 .visible-xs 和 .hidden-xs 不感兴趣...

谢谢!

Answer 1

container 和 container-fluid 之间的唯一区别是宽度，因此子元素(行、列等)在两者中的行为相同。

默认情况下，container 在 xs 屏幕上变为全宽 (100%)，因此在屏幕宽度小于 768px 时，container和 container-fluid 的行为完全相同。您不需要进行任何更改，只需使用 container 即可。

http://codeply.com/go/8ei2hMKBKd