"row" 进入下一节时遇到问题

Question

我在这方面遇到了麻烦...所以我的问题在于我的导航栏下方的第一部分也包括该部分中的导航栏。我的导航栏是 bootstrap .navbar-default。我制作了自定义样式 sheet 来覆盖某些 bootstrap 样式。在该自定义样式 sheet 中，我用自己的样式覆盖了一些 .navbar-default 样式。

.navbar-default {
    background-color: #131a33;
    min-height: 90px;
    border-radius: 5px;
    position: fixed;
    width: 100%;
    z-index: 1; 
}

当我在我的自定义样式 sheet 中创建此样式时，一切顺利，但这就是导致我屏幕下方的部分包含导航栏的原因。现在我的行一直向上进入（而不是向上）该部分的导航栏，但在该部分的底部留下了一个空白。现在问题在于，当我转到移动尺寸时，该部分中的行向下推到我的下一部分。我知道这一切都很混乱。现在这里变得更加混乱了。我希望该部分像现在一样包含导航栏，因为在该部分中，背景图像位于导航栏后面，我希望保持这种状态。这是我的导航栏和第一部分代码。

<nav class="navbar-default top-of-page">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src='/CMS_Static/Uploads/313864614C6F6F/fv-logo-3.gif' align="left"/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul id="navLinks" class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Locations</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<section class="topInfo">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-offset-2">
                <h1 class="topInfoText text-center">Aerial Photography In South Florida</h1>
            </div>
            <div class="col-sm-4 col-sm-offset-4">
                 <a class="btn bannerBtn btn-block" href="/videography">View More</a>
            </div>
        </div>
    </div>
</section>

Answer 1

你好兄弟，因为你在你的 .navbar-default 中使用了 position fixed。我喜欢你尝试下面的例子，希望它能帮助你解决问题谢谢并根据需要调整 margin-top

.topInfo{width:100%;float:left;margin-top:200px;}

Answer 2

我不确定我是否正确理解了你的问题。请查看 codepen here.It 即使在移动设备上看起来也不错。现在你可以告诉我你是在寻找这个还是你的期望是别的东西。我会尽力帮助你。

.navbar-default {
    background-color: #131a33;
    min-height: 90px;
    border-radius: 5px;
    
    width: 100%;
    z-index: 1; 
}

<nav class="navbar-default top-of-page">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src='/CMS_Static/Uploads/313864614C6F6F/fv-logo-3.gif' align="left"/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul id="navLinks" class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Locations</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<section class="topInfo">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-offset-2">
                <h1 class="topInfoText text-center">Aerial Photography In South Florida</h1>
            </div>
            <div class="col-sm-4 col-sm-offset-4">
                 <a class="btn bannerBtn btn-block" href="/videography">View More</a>
            </div>
        </div>
    </div>
</section>
<section class="topInfo">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-offset-2">
                <h1 class="topInfoText text-center">Aerial Photography In South Florida</h1>
            </div>
            <div class="col-sm-4 col-sm-offset-4">
                 <a class="btn bannerBtn btn-block" href="/videography">View More</a>
            </div>
        </div>
    </div>
</section>

Codepen working copy

"row" 进入下一节时遇到问题

trouble with "row" going into next section

html

css

rows

sections

twitter-bootstrap