css - Twitter Bootstrap 中的重叠行

Question

我遇到以下代码中重叠的行的问题:

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="navbar navbar-fixed-top  ">
                    <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
                        Site.com
                    </a>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="">Contact Us</a></li>
                        <li><a href="">NL</a></li>
                        <li><a href="">ENG</a></li>
                        <li><a href="">SP</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>


    <div class="row">
        <div class="col-md-6"><h1>This is my header</h1></div>
        <div class="col-md-6"><img src="img/MyPicture.JPG" height="300"></div>
    </div>

在我的浏览器中，最后一行位于导航栏上方。会不会跟第二排在容器外面有什么关系？如果是这样，我应该在哪里定义容器。

这是 jsfiddle 文本:http://jsfiddle.net/L9GJE/

Answer 1

换行<div class="row">用<div class="container">

例如

<div class="container">
   <div class="row">
      ....
   </div>
</div>

所以每当你使用 navbar你需要记住它是fixed你需要添加 margin或 padding来自 top这样您的行就不会重叠。