css - Bootstrap：如何让我的部分横幅图像隐藏在我的侧边栏下？

Question

工作我的第一个 Twitter Bootsrap 项目。自从我使用 CSS/HTML 以来已经有一段时间了，所以请耐心等待。我的问题是：

如何让横幅图像的左侧位于侧边栏菜单栏下方？侧边栏列纹理是透明的 png。我敢肯定这是一个简单的修复......但我现在想不出来！帮助！:)

这是我的页面。

Answer 1

一个真正简单的解决方案是将横幅图像放在父容器后面并正确对齐。它不需要自己的 div，您也不必以任何方式裁剪图像。

您还需要使用一些顶部填充调整右列，使其不会与图像重叠。

---

更新

这里有一些代码可以帮助你。改变：

<section class="row menuPage">
    <aside class="span3 sidebar">...</aside>
    <section class="span9">
        <div class="banner"></div>
        <article>...</article> 
    </section>
</section>

到

<section class="row menuPage">
    <aside class="span3 sidebar">...</aside>
    <section class="span9">
        <article>...</article> 
    </section>
</section>

并添加以下 CSS 声明（针对容器中的第一个子项）：

.section.menuPage {
    url("img/banner2.png") no-repeat scroll right top #1C0F0A;
}

Answer 2

如果我理解正确，我认为您正在寻找这样的东西：

• http://jsfiddle.net/w3pR4/1/embedded/result/
• http://jsfiddle.net/w3pR4/（代码）

基本上我所做的只是将横幅移到主列的跨度网格之外，进入它自己的跨度。换句话说，它之前嵌套在 a 下span9，我只是将它重新定位到两列之上，并赋予它自己span12以保持一些响应性（请注意小提琴中的响应性可能不起作用）。