Question

我遇到了麻烦......所以问题出在我的导航栏下面的第一部分还包括该部分的导航栏。我的导航栏是一个引导程序.navbar-default。我已经制作了一个自定义样式表来覆盖一些引导程序样式。在那个自定义样式表中，我用自己的样式覆盖了一些.navbar-default样式。

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

当我在自定义样式表中创建此样式时，一切进展顺利，但这导致我的屏幕下方的部分包含导航栏。现在我的行一直向上移动到该部分的导航栏INTO（而不是最多），但是该部分的底部留有一个间隙。现在问题在于，当我转到移动尺寸时，该部分中的行将进入下一部分。我知道这一切都很令人困惑。现在，这里更令人困惑。我希望该部分包含像现在这样做的导航栏，因为在该部分中，背景图像位于导航栏后面，我希望保持这种方式。这是我的导航栏和第一部分代码。

<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中使用了固定位置。我喜欢你尝试下面的例子，希望它能帮助你解决你的问题并根据需要调整margin-top

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

Answer 2

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

.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

“行”进入下一部分的问题

2 个答案: