Question

我正在为我的网站使用Bootstrap，我需要创建一个大小为1250px的容器，但问题是当我更改Bootstrap容器的类时，响应性将不再起作用。

我该怎么办？

Answer 1

设置'container-fluid'只会创建一个100％宽度的容器。将整个东西包裹在1250像素宽的容器中会导致容器无法响应。最好的办法是为流体容器分配一个'max-width'，我已经包含了下面的标记：

<div class="container-fluid" style="background-color:#CDCDCD; max-width:1250px">

集装箱-流体

Answer 2

您可以创建自定义容器并将其与默认容器一起使用（只需覆盖宽度）。你可以根据需要改变宽度：

CSS：

@media (min-width: 768px) {
.my-custom-container{
    width:600px;
}}

@media (min-width: 992px) {
.my-custom-container{
    width:720px;
}}

@media (min-width: 1200px) {
.my-custom-container{
    width:900px;
}}

HTML：

<div class="container my-custom-container">
your content Goes here .......
</div>

Answer 3

您可以在css文件中为容器指定宽度：

.container {
    width:1250px;
}

然后编写媒体查询以使其响应：

@media only screen and
(max-width : 1249px ) {

    .container {
        width:100%;
    }

}

Answer 4

您是否尝试使用液体容器进行自举？

尝试将'容器'更改为'容器流体'

可能有帮助

Answer 5

您可以根据需要更改容器的宽度。为此，请添加以下css行：

.container{ 
  max-width:1250px; 
  width:100%; 
}

Answer 6

您可以根据需要更改容器的宽度。为此，请添加这些css行

@media (min-width: 1200px) {
  .container {
    width: 1250px !important;
  }
}

由于

Answer 7

将一个特殊的类my_custom_menu放到菜单容器中。然后将下面的样式复制到样式表....

@media (min-width: 1200px) {
  .container.my_custom_menu  {
    width: 1250px;
  }
}

谢谢

Bootstrap容器宽度更改

7 个答案: