如何将Bootstrap导航栏移动到右侧？

我在twitter Bootstrap中使用了绝对定位的导航栏，但是当我在导航栏项目中使用标签内的.pull-right类时，导航栏项目保持在左侧。我也尝试过使用float：right;和文本对齐：正确;那些没有工作。导航栏的绝对位置是否会影响此行为？我怎样才能让导航条移动到横幅的右侧？如何将Bootstrap导航栏移动到右侧？

.wrapper { 
 
    position: relative; 
 
} 
 

 
#banner { 
 
    height: 50vh; 
 
    width: 100vw; 
 
    position: relative; 
 
} 
 

 
#responsive-nav { 
 
    background-color: transparent; 
 
    position: absolute; 
 
    z-index: 2; 
 
} 
 

 
#logo { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 60px; 
 
    z-index: 1; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Mock Up</title> 
 
    <!-- Custom CSS --> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <!-- Bootstrap Link --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-static-top"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
        <!-- Collapsing Hamburger Buttons for mobile --> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <div class="collapse navbar-collapse" id="responsive-nav"> 
 
        <ul class="nav navbar-nav pull-right"> 
 
         <li class="nav-item"> 
 
          <a href="#about">Home</a> 
 
         </li> 
 
         <li class="nav-item"> 
 
          <a href="#work">Projects</a> 
 
         </li> 
 
         <li class="nav-item"> 
 
          <a href="#contact">Contact</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
       <div class="wrapper"> 
 
       <img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1"> 
 
       <img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
    </nav> 
 
    <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

来源

2017-09-19 Dylan Davenport

请直接在您的问题中插入相关代码。 – Luuklag

我继续编辑问题。我删除了代码笔的评论。是否有一段时间不添加大量代码会更实际？我想到一个代码笔链接会让事情不那么混乱在这个页面上？为了将来的参考是增加所有的代码更好的做法？ –

与此网站上的其他问题相比，您的问题只包含一点点代码。然而，总是建议将您的代码减少到MVCE或MCVE。 – Luuklag

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

.wrapper { 
 
    position: relative; 
 
} 
 

 
#banner { 
 
    height: 50vh; 
 
    width: 100vw; 
 
    position: relative; 
 
} 
 

 
#responsive-nav { 
 
    background-color: transparent; 
 
    position: absolute; 
 
    z-index: 2; 
 
} 
 

 
.navbar-toggle { 
 
    z-index: 9; 
 
} 
 

 
#logo { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 60px; 
 
    z-index: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-static-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <!-- Collapsing Hamburger Buttons for mobile --> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <div class="collapse navbar-collapse" id="responsive-nav"> 
 
      <ul class="nav navbar-nav pull-right"> 
 
       <li class="nav-item"> 
 
        <a href="#about">Home</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a href="#work">Projects</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a href="#contact">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <div class="wrapper"> 
 
     <img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1"> 
 
     <img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

希望这会帮助你。

来源

2017-09-19 17:20:24 Shiladitya

使用id = “响应-NAV” 亲本的div必须是宽度100％

来源

2017-09-19 11:08:36

width: 100%添加到#responive-nav。

#responsive-nav { 
    background-color: transparent; 
    position: absolute; 
    z-index: 2; 
    width: 100%;}

来源

2017-09-19 11:13:13

如何将Bootstrap导航栏移动到右侧？

回答

相关问题