html - 在 Bootstrap 中以最小宽度居中行

Question

我有一个关于 bootstrap 的愚蠢问题，因为我今天似乎失去了理智......无论如何我希望设置我的 container-fluid div 的背景颜色，以便它跨越页面的整个宽度。但是，我希望子 row-fluid div 位于父级的中间，最小宽度为(例如:970px)。 row-fluid div 将包含各种 col-* div。这张图片可能有帮助:

在我的 HTML 中，我有以下结构:

   <div class="container-fluid text-center header">
       <div class="row"> <!-- when I use class="row-fluid" I lose the centering -->
            <div class="col-xs-3">Logo</div> <!-- i have used the col-md-* class too) -->
            <div class="col-xs-3">Dropdown</div>
            <div class="col-xs-3">Telephone</div>
            <div class="col-xs-3">Local</div>
        </div>
    </div>

这是我的 css(注意我正在使用 bootstrap 提供的文本中心类)

.header .row {
  margin: auto;
  float: none;
  width: 970px;
  text-align: left;
}

虽然我真的想使用 Bootstrap Grid 的响应方面，但当我调整窗口大小时，网站没有响应，但现在这可行了。我知道为此我应该使用 row-fluid 类来实现这一点，但后来我失去了居中效果。也许我应该使用偏移量，有没有人知道如何实现我想要的？我还意识到我的代码有 4 列，我的图像有 3 列。提前致谢。我正在使用 Bootstrap 3.1.1

Answer 1

使用 max-width 970px，宽度 100%，margin left auto 和 margin right auto .header .row

这应该导致宽度为 970px 并使 div 居中，它也应该随着视口(viewport)尺寸的减小而缩小