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

Question

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

我希望包装此图像的容器(以及在 DOM 层次结构中包装它的任何容器)适应 1200 像素。我想到的第一件事就是:

.container {
    width:1200px;
}

它可以工作，但是使用 bootstrap 有什么意义呢？而且，我可能会通过这种方式强制宽度来弄乱网格，对吗？

因此，我尝试将网格设置为总计 1200 像素，但仍保留 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 会适应标题照片 div 的大小，但最多只能达到 1192 像素。

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

1. 强制使用 CSS 规则(就像我试过的那样)？
2. 我一无所知的网格配置组合？
3. 告诉设计师将标题照片变小/变大以适应另一个值？
4. ... ?

非常感谢任何提示!

提前致谢!

Answer 1

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