我有一个我正在处理的布局的标题图像,宽度为 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 像素的最佳方法是什么?
- 用 CSS 规则强制它(就像我尝试做的那样)?
- 我一无所知的网格配置组合?
- 告诉设计师让标题照片更小/更大,以便适应另一个值?
- ... ?
任何提示高度赞赏!
提前致谢!