Question

我正在学习bootstrap并从头开始创建一个网站，目前我对这个例子有问题，因为导航栏在文本上方，我想做的是在导航栏后启动文本。

代码：

<body>
<!-- Navigation Menu-->
 <div class="container">
 <nav class="navbar  navbar-inverse  navbar-fixed-top">

  <button type="button" class="navbar-toggle"
  data-toggle="collapse"
  data-target=".navbar-collapse"
  >
  <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="index.html">Testing Tool</a>
       <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav navbar-right">
             <li class=""><a href="transmissionpackage.html">Option 0</a> </li>
             <li> <a href="">Option 1</a> </li>
           </ul>
       </div>

</nav>
</div>

<!-- Header -->
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="img/profile.png" alt="">
                    <div class="intro-text">
                        <h1 class="name">Start Bootstrap</h1>
                        <hr class="star-light">
                        <span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
                    </div>
                </div>
            </div>
        </div>
</body>

预期结果：

NAV BAR
SECOND CONTAINER

Answer 1

您可以使用解决方案https://jsfiddle.net/7gg44938/

＆＃13;

.container:nth-child(2){
  margin-top: 55px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Navigation Menu-->
 <div class="container">
 <nav class="navbar  navbar-inverse  navbar-fixed-top">

  <button type="button" class="navbar-toggle"
  data-toggle="collapse"
  data-target=".navbar-collapse"
  >
  <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="index.html">Testing Tool</a>
       <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav navbar-right">
             <li class=""><a href="transmissionpackage.html">Option 0</a> </li>
             <li> <a href="">Option 1</a> </li>
           </ul>
       </div>

</nav>
</div>

<!-- Header -->
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="img/profile.png" alt="">
                    <div class="intro-text">
                        <h1 class="name">Start Bootstrap</h1>
                        <hr class="star-light">
                        <span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
                    </div>
                </div>
            </div>
        </div>
</body>

＆＃13;

我建议您使用容器流体类而不是容器

Answer 2

假设您在整个网站的多个页面和所有网页上都有固定顶部导航栏，我建议在body的顶部添加填充，其高度与导航栏的高度相同，而不是容器类。例如，如果您的导航栏是55px，请添加到您的CSS：

body {
  padding-top: 55px;
}

这将允许补偿导航栏的空间在任何地方持续存在。请注意，如果导航栏高度在移动设备上折叠时发生更改，则您希望为填充量的更改添加媒体查询。

bootstrap nav在文本上方

2 个答案: