html - 使用 twitter bootstrap 将容器设置为具有精确宽度

Question

我有一个我正在处理的布局的标题图像，宽度为 1200 像素。布局是固定的。

我希望包装此图像的容器（以及将其包装在 DOM 层次结构中的任何容器）以适应 1200px。我想做的第一件事就是：

.container {
    width:1200px;
}

它有效，但是使用引导程序有什么意义呢？而且，我可能会通过这种方式强制宽度来弄乱网格，对吧？

因此，我尝试将网格设置为 1200px，但仍保留 12 列，如下所示（我使用的是 sass）：

$grid-column-width:         70px;
$grid-gutter-width:         32px;

但是，我只能近似（或超过）1200 像素，同时保留 12 列。在这种情况下，我得到了 1192px，它可以工作，但不是最佳的。

这是我正在使用的标记：

<div class="container">
   <div class="row-fluid">
       <div class="header-photo text-center span12"></div>
       <div class="row-fluid">
         ...
       </div>
         ...
    </div>
</div>

这是设置标题 div 的 SCSS：

div.header-photo {
  background-image: url(/images/header-photo.png);
  width: 1200px;
  height: 368px;
  h2,h3 {
    text-indent: -99999px;
  }
}

因此，如果我使用 span12，其他 div 会适应 header-photo div 的大小，但最多只能达到 1192px。

使容器恰好为 1200 像素的最佳方法是什么？

1. 用 CSS 规则强制它（就像我尝试做的那样）？
2. 我一无所知的网格配置组合？
3. 告诉设计师让标题照片更小/更大，以便适应另一个值？
4. ... ?

任何提示高度赞赏！

提前致谢！

Answer 1

您应该通过打开 bootsrap gem 来修复容器值