Bootstrap容器-流体和容器

Question

我正在设计一个使用twitter bootstrap的网站。除了标题区域之外，一切都运行得很好。

Screenshot

我已经使用.container-fluid来设置全宽背景。并使用.container将内容放在960px内。但问题出在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>

Answer 2

我认为你不想使用position:absolute property.However，你不能让你的徽标背景区域填充.container class.Because之外的左边区域，不管你做什么，它都会留在.container类内部。唯一的方法是使position:absolute或将您的.logo类移出.container类(恰好在.container类的上方)。