Bootstrap容器宽度更改

Question

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

我该怎么办？

- Dennis

Answer 1

只需设置“container-fluid”，即可创建一个100％宽度的容器。将整个内容包装在1250像素宽度的容器中会导致您的容器不具有响应性。最好的做法是为您的流体容器分配“max-width”，我已经包含了下面的标记：

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

流体容器

- eroedig

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>

- amit2091

Answer 3

您可以在CSS文件中为容器设置宽度：

.container {
    width:1250px;
}

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

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

    .container {
        width:100%;
    }

}

- Minal Telgade

Answer 4

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

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

- Anubhav pun

Answer 5

你尝试过使用Bootstrap的流体容器吗？

试着将“container”改为“container-fluid”。

这可能会有所帮助。

- user4095424

Answer 6

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

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

谢谢

- sunilkjt

Answer 7

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

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

谢谢

- Sarower Jahan