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

Question

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

如何将横幅图片的左侧放在侧边栏菜单栏下？侧栏列纹理是透明的png。我确定这是一个简单的修复......但我现在想不到它！救命！ ：）

这是my page。

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/（代码）

基本上我所做的只是将主栏的跨度网格之外的横幅移动到它自己的跨度中。换句话说，它之前嵌套在span9之下，我只是将它重新定位在两列之上并给它自己的span12以保持一定的响应性（注意小提琴中的响应性可能赢了）不行。）