css - Bootstrap容器-流体和容器

Question

我正在使用 Twitter Bootstrap 设计一个网站。除标题区域外，一切正常。

Screenshot

我已经使用 .container-fluid 来设置全 Angular 背景。并使用 .container 将内容放在 960px 以内。但问题在于 Logo 背景。我希望 Logo 背景区域填充 .container 类之外的左侧区域。可能吗？

这是我的标记 -

<div class="container-fluid full-width">
        <div class="row-fluid header-top">
            <div class="container">
                <div class="span4 logo-area">
                    <div class="logo">
                        <h1> <a href=""> hello.</a></h1>
                    </div>
                </div>

                <div class="menu span8">
                    <div class="navbar">
                        <ul class="nav" id="nav">
                            <li><a href="#"> Home </a></li>
                            <li><a href="#"> Menu Item2 </a></li>
                            <li><a href="#"> Menu Item3 </a></li>
                            <li><a href="#"> Menu Item4 </a></li>
                            <li><a href="#"> Menu Item5 </a></li>
                            <li><a href="#"> Menu Item6 </a></li>               
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>

提前致谢。

Answer 1

是的，但是您需要将其从容器流中移除，方法是将其放置在容器外部，或者使用 CSS 通过给它 position:absolute 等来控制它。

类似于:

          <div class="logo">
                <h1> <a href=""> hello.</a></h1>
            </div>

<style>
.logo {
position:absolute;
top:100px;
left:100px;
}
</style>

<div class="container-fluid full-width">
        <div class="row-fluid header-top">
            <div class="container">

                <div class="menu span8">
                    <div class="navbar">
                        <ul class="nav" id="nav">
                            <li><a href="#"> Home </a></li>
                            <li><a href="#"> Menu Item2 </a></li>
                            <li><a href="#"> Menu Item3 </a></li>
                            <li><a href="#"> Menu Item4 </a></li>
                            <li><a href="#"> Menu Item5 </a></li>
                            <li><a href="#"> Menu Item6 </a></li>               
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>