twitter-bootstrap - Twitter Bootstrap 2.x：如何让 Container 的顶角与 Header 角对齐？

Question

有没有人有关于如何让我的容器背景图形的上角与标题的左角对齐的任何提示或建议？暂时忽略褐色。我现在只关心正确放置位置。

这是违规区域的屏幕截图。这是我页面的实时预览。

注意：我使用的是网格系统，这就是为什么我有额外的左边距的原因。

Answer 1

您正在使用默认网格，另请参阅http://twitter.github.io/bootstrap/scaffolding.html#gridSystem。网格宽度为 940 像素。类的宽度.container也是 940px。该类.row的宽度也为 940 像素。但是.row该类的负左边距为-20px。的总宽度为.row940px + 20px = 960px。您将标题的背景图像添加到.container(940px) 并将黑色背景颜色添加到.row(960px)。

解决方案1（首选）：

用类将您的内容包装在 div 中span*。div.span12 的宽度是 940px。

<div class="container">
    <header class="row homePage">
        <div style="background-color: #1C0F0A;" class="span12"> 
            <nav class="clearfix" id="homeNav">
                <ul>
                    <li><a class="span2" href="#">Home</a></li>
                    <li><a class="span2" href="menu.html">Our Menu</a></li>
                    <li class="span3"></li>
                    <li><a class="span2" href="#">Experience</a></li>
                    <li><a class="span2" href="#">Location</a></li>
                </ul>
            </nav>
    </div>
</div>

不要忘记删除 CSS 中 header.row、section.row 的背景颜色。

解决方案 2

将您的背景图像放在 (div).row 中：

html:

<div class="container">
<div class="row headerrow"></div>
<header class="row homePage">   

CSS：

.container .headerrow {
    background-image: url("../img/container_top.png");
    background-position: left top;
    background-repeat: no-repeat;
    height: 10px;
    margin-top: 2em;
}

也从您那里删除.homePage { margin-top: 0.7em; }custom.css。