Question

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

我使用了.container-fluid来设置全角背景。并使用.container将内容放在960px内。但问题在于徽标背景。我想要徽标背景区域填写.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。但是你不能让你的logo背景区填写.container类之外的左边区域。因为无论你做什么，它都会保留在.container类中。。唯一的方法是要么你做位置：绝对要么你的.logo类移动到.container类之外（就在.container类之上）。

Bootstrap容器 - 液体和容器

2 个答案: