Bootstrap将导航栏右侧

Question

嗨，大家好，我准备好了我的背景图片并在我的网站上排序，我的左侧有我的标志，我正在试图让我的导航栏与标志位于同一行上，但是在屏幕的一侧搭，一个网站的

例子：Site

到目前为止，我有：

HTML：

<div class="parallax"> 
    <div class ="logo"> 
     <img src="Images/logo1.fw.png"> 
    </div> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">About</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div><!--/.container-fluid --> 
    </nav> 
</div> 

CSS：

.parallax { 
     background-image: url("../Images/back1.jpg"); 
     min-height: 1000px; 
     background-attachment: fixed; 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 
     width: 100%; 
    } 

    .parallax1 { 
     min-height: 1000px; 
    } 

    .logo { 
     padding-top: 20px; 
     padding-left: 40px; 
    } 

    .navbar-default { 
     background-color: transparent; 
     border-top: 0px solid rgba(0, 0, 0, 0.5); 
     border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
     border-left: 0px solid rgba(0, 0, 0, 0.5); 
     border-right: 0px solid rgba(0, 0, 0, 0.5); 
    } 

    .navbar-default .navbar-nav>li>a { 
     color: #ffffff; 
    } 

Answer 1

我想你要寻找的是下一个浮动导航栏的标志：

.logo { 
    float: left; 
} 

.navbar { 
    float: right; 
} 

我创建了一个展示的jsfiddle这here，一些免去您的相对图像占位符。

希望这会有所帮助！ :)

Answer 2

使用引导程序4，您应该使用助手类。您可以使用.d-flex和.justify-content-between使元素display: flex; justify-content: space-between。如果要垂直居中它们，你可以使用.align-items-center

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style> 
 
body { 
 
    background: black; 
 
} 
 

 
.parallax { 
 
    background-image: url("../Images/back1.jpg"); 
 
    min-height: 1000px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    width: 100%; 
 
} 
 

 
.parallax1 { 
 
    min-height: 1000px; 
 
} 
 

 
.logo { 
 
    padding-top: 20px; 
 
    padding-left: 40px; 
 
} 
 

 
.navbar-default { 
 
    background-color: transparent; 
 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-left: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-right: 0px solid rgba(0, 0, 0, 0.5); 
 
} 
 

 
.navbar-default .navbar-nav > li > a { 
 
    color: #ffffff; 
 
} 
 
</style> 
 
<div class="parallax"> 
 
    <header class="d-flex justify-content-between align-items-center"> 
 
    <div class="logo"> 
 
    <img src="Images/logo1.fw.png"> 
 
    </div> 
 

 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li class="dropdown-header">Nav header</li> 
 
       <li><a href="#">Separated link</a></li> 
 
       <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <!--/.nav-collapse --> 
 
    </div> 
 
    <!--/.container-fluid --> 
 
    </nav> 
 
    </header> 
 
</div>

或者，如果你对自举3，使用.pull-left和.pull-right类浮动左标志和NAV权。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<style> 
 
    body { 
 
    background: black; 
 
    } 
 
    
 
    .parallax { 
 
    background-image: url("../Images/back1.jpg"); 
 
    min-height: 1000px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    width: 100%; 
 
    } 
 
    
 
    .parallax1 { 
 
    min-height: 1000px; 
 
    } 
 
    
 
    .logo { 
 
    padding-top: 20px; 
 
    padding-left: 40px; 
 
    } 
 
    
 
    .navbar-default { 
 
    background-color: transparent; 
 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-left: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-right: 0px solid rgba(0, 0, 0, 0.5); 
 
    } 
 
    
 
    .navbar-default .navbar-nav > li > a { 
 
    color: #ffffff; 
 
    } 
 
</style> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="parallax"> 
 
     <div class="logo pull-left"> 
 
     <img src="Images/logo1.fw.png"> 
 
     </div> 
 

 
     <nav class="navbar navbar-default pull-right"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a></li> 
 
        <li><a href="#">Another action</a></li> 
 
        <li><a href="#">Something else here</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li class="dropdown-header">Nav header</li> 
 
        <li><a href="#">Separated link</a></li> 
 
        <li><a href="#">One more separated link</a></li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <!--/.nav-collapse --> 
 
     </div> 
 
     <!--/.container-fluid --> 
 
     </nav> 
 
    </div> 
 
    </div> 
 
</div>