在 Bootstrap 中以最小宽度居中该行答案

【问题标题】：Centering the row in Bootstrap with a minimum width在 Bootstrap 中以最小宽度居中该行
【发布时间】：2014-05-16 00:02:35
【问题描述】：

我有一个关于引导程序的愚蠢问题，因为我今天似乎失去了理智......无论如何我希望设置我的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

【问题讨论】：

.col-xs- 响应速度最快
bootstrap 3 中没有 .row-fluid 类。bootstrap 2 中也没有 col-sm-3。
抱歉会把我的例子改成 col-xs
您需要为.header .row 指定一个相对宽度。除非您在媒体查询中提供该样式。

标签： html css twitter-bootstrap

【解决方案1】：

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

这应该会导致宽度为 970px 并以 div 为中心，当您减小视口大小时，它也应该按比例缩小

【讨论】：

你应该喝啤酒！