Bootstrap container-fluid仅适用于xs设备

Question

我想在xs和sm设备(容器流体)上使用全宽,但只是所有其他设备的容器类使用什么是最好的方法？我已经尝试了jasnys bootstrap,它有一个容器平滑的类,但是当屏幕超过一定大小时它不会使内容居中......

Answer 1

在CSS中覆盖容器类并完成:

/* XS styling */
@media (max-width: @screen-xs-max) {
  .container {
    width: inherit;
  }
}

/* SM styling */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .container {
    width: inherit;
  }
}

只需将Less变量替换为相应的px值即可.

Answer 2

或者你可以这样做，它也有效：

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
    .container {
        min-width: 100%;
    }
}

Answer 3

您可以添加同一容器的副本，并使用类hidden-xx和visible-xx将其配置为仅以您想要的大小可见，如下所示：

<div class="container-fluid hidden-md hidden-lg">
   your content here
</div>

对于普通容器来说：

<div class="container hidden-xs hidden-sm">
       your content here
    </div>