demo

Question

CSS CODE FOR CONTAINER:
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.container-fluid    {
width: 1220px;
}

如果您查看我所拥有的jsfiddle并查看结果窗口，看起来很好，但是当窗口最小化时，导航栏项目不会根据窗口大小更改大小。我正在尝试保持容器/盒装布局，同时保持引导程序的响应能力。有什么想法吗？

Answer 1

首先看看你的代码。您的整个内容代码甚至不在<body>中。其次，我甚至无法看到你的导航栏项目。第三，因为你使用的是Twitter引导程序，你甚至不需要position: absolute你的元素因为每个设备调整它会造成大麻烦。第四，请不要将type='text/css'用于<link>因为您已将文档声明为HTML5文档。尝试使您的代码具有语义;）

Answer 2

您的问题很简单，即无论视口的宽度如何，您都会覆盖.container-fluid类的宽度，强制它为1220px。

将容器类更改为max-width: 1220px;，如下面的演示中所示，或使用内置的container类。默认情况下，容器类在每个Bootstrap断点处具有以下固定宽度：

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

Bootstrap左中心/右中心对齐的导航栏项目无响应

2 个答案:

demo