對齊按鈕在文本右側的導航欄

這是我的代碼到目前爲止的標題，你會看到，解釋其帳戶的文本和註銷按鈕不會按住右邊的按鈕文本。對齊按鈕在文本右側的導航欄

<html> 
<head> 
    <title>DroneReg - File Section 333 Easy</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro|Raleway' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 

    <!--Start Meta Content--> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <a href="index.html" class="navbar-brand">DroneReg</a> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <div class="collapse navbar-collapse navHeaderCollapse"> 
      <!--start difficulty--> 
        <p class="navbar-text navbar-right">Signed in as, <a href="#" class="navbar-link" style="color: white;">Mark Otto</a></p> 
       <div> 
        <button type="button" class="btn btn-default navbar-btn pull-right"><a href="/logout">Logout</a></button> 
       </div>      
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2016-01-16 Alex Senn

包裹要正確的代碼：

<div class='nav navbar-nav navbar-right'>

像這樣：

<div class="collapse navbar-collapse navHeaderCollapse"> 
    <div class='nav navbar-nav navbar-right'> 
     <p class="navbar-text navbar-right">Signed in as, <a href="#" class="navbar-link" style="color: white;">Mark Otto</a></p> 

     <button type="button" class="btn btn-default navbar-btn pull-right"><a href="/logout">Logout</a></button> 
    </div> 
</div>

來源

2016-01-16 20:22:48 Kevin

您需要刪除導航欄，右側和右拉從當前設置（請參閱Docs中的Component Alignment以獲取更多信息），然後在您的鏈接中包裝<div class='nav navbar-nav navbar-right'>。

如果您希望這些保持768px以下視口上的默認導航欄鏈接的對齊方式，則需要添加您自己的CSS，因爲導航欄鏈接通常用於默認導航組件之外的鏈接。 **請記住，如果您不想在全球範圍內更改它們，您可能需要/需要爲這些課程添加新課程。

對於使用標準鏈接不屬於正規導航欄導航組件內的人來說，使用.navbar鏈接類添加適當的顏色默認和逆導航欄選項。

*旁註：您還錯過了navbar-header類，這將在結構上有重大差異。請參閱

請參閱全頁面上的工作示例代碼段。

.navbar-nav .logout-btn a { 
 
    text-decoration: none; 
 
    color: #777; 
 
} 
 
.navbar-nav a.navbar-link { 
 
    color: white; 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar-nav .logout-btn, 
 
    .navbar-nav .navbar-text { 
 
    margin-left: 15px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="index.html" class="navbar-brand">DroneReg</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse navHeaderCollapse"> 
 

 
     <div class='nav navbar-nav navbar-right'> 
 
     <p class="navbar-text">Signed in as, <a href="#" class="navbar-link">Mark Otto</a> 
 
     </p> 
 
     <li> 
 
      <button type="button" class="btn btn-default navbar-btn logout-btn"><a href="/logout">Logout</a> 
 
      </button> 
 
     </li> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2016-01-16 21:00:11 vanburen

對齊按鈕在文本右側的導航欄

回答

相關問題