2

我正在使用 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>

提前致谢。

4

2 回答 2

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>
于 2013-07-19T15:20:24.963 回答
0

我认为您不想使用位置：绝对属性。但是，您不能使徽标背景区域填充 .container 类之外的左侧区域。因为无论您做什么，它都会保留在 .container 类中。唯一的方法是要么确定位置：绝对，要么将 .logo 类移到 .container 类之外（就在 .container 类上方）。

于 2013-07-19T16:02:13.850 回答