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>

Bootstrap container-fluid仅适用于xs设备

3 个答案: