bootstrap导航结束文本

我学习导入并从头开始创建网站，目前我遇到了这个例子的问题，因为导航栏在文本上，我想要做的是在导航后启动文本酒吧。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>

预期结果：

导航栏
第二个容器

来源

2017-07-27 Ivan Valdes

我不明白你想在这里实现小提琴看起来好吗.. https://jsfiddle.net/DTcHh/ –

在这里，你去了一个解决方案https://jsfiddle.net/7gg44938/

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

<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>

我会建议你使用容器流体类，而不是容器

来源

2017-07-27 17:34:34 Shiladitya

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

body { 
    padding-top: 55px; 
}

这将允许空间补偿导航栏坚持无处不在。请注意，如果导航栏高度在移动设备上崩溃时发生更改，您将需要为填充量的更改添加媒体查询。

来源

2017-07-27 19:39:36 AnnieP

bootstrap导航结束文本

回答

相关问题