如何在自舉中將菜單分成左右兩部分

我正試圖在bootstrap 3.x中創建一個導航欄。但是，如下例所示，嘗試將菜單左右分割時，我遇到了一個問題（JsFiddle）。如何在自舉中將菜單分成左右兩部分

Home - About - Services - Contact           Login - Register

但結果我用我的代碼得到的是這樣的：

Home - About -                  Login 
Services - Contact                Register

這是目前我的代碼。

.site-top-nav{ 
 
    padding:0.5em; 
 
    color: #fff; 
 
    font-size: 12px; 
 
    width: 100%; 
 
    text-transform: uppercase; 
 
} 
 

 
.site-top-nav li{ 
 
    margin-left: 2%; 
 
}

<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> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse" role="nagivation"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-inner site-top-nav"> 
 
     <ul class="nav navbar-nav"> 
 
      <li>Home</li> 
 
      <li>About</li> 
 
      <li>Services</li> 
 
      <li>Contact</li> 
 
     </ul> 
 
     <ul class="nav navbar-nav" style="float:right;"> 
 
      <li>Login</li> 
 
      <li>Register</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

我曾嘗試其他方法，但我不能得到我所需要的效果。

來源

2017-06-19 hidar

使用style屬性'''style =「float：right」'''''''''''''''''''''' ：//jsfiddle.net/DTcHh/ –

我更新了你的jsfiddle以獲得更多幫助：https://jsfiddle.net/ns82ne1z/1/ –

chk this --- https://www.w3schools.com/bootstrap/ tryit.asp？filename = trybs_navbar_right＆stacked = h –

使用float: left屬性爲其他ul元素，display: inline-block到li元素

嘗試使用此Jsfiddle code updated

來源

2017-06-19 11:29:06

這不響應 – Ehsan

@ehsan什麼是響應式設計 –

實例下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav> 

<div class="container"> 
    <h3>Basic Navbar Example</h3> 
    <p>A navigation bar is a navigation header that is placed at the top of the page.</p> 
</div> 

</body> 
</html>

如果有幫助的標記作爲答案。

來源

2017-06-19 11:23:24

你需要做的是這樣的代碼，我將在下面鏈接：

.body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.nav-bar { 
 
    padding: 0px; 
 
    width: 100%; 
 
    margin: 0px auto; 
 
} 
 

 
.nav-bar ul { 
 
    list-style-type: none; 
 
} 
 

 
.nav-bar li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 

 
.left { 
 
    position: relative; 
 
    right: 30px; 
 
} 
 

 
.right { 
 
    float: right; 
 
}

<html> 
 
    <body> 
 
    <div class="nav-bar"> 
 
     <ul> 
 
     <li class="left">Home</li> 
 
     <li class="left">About</li> 
 
     <li class="left">Contact</li> 
 
     <li class="left">More</li> 
 
     <li class="right">Register</li> 
 
     <li class="right">Log In</li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 
</html>

希望這對你有用，任何問題請回報。它在小提琴裏工作，所以它應該適用於你的項目。

祝你好運！

來源

2017-06-19 11:31:43 JamesTheHunt

Editted上https://jsfiddle.net/ns82ne1z/4/

<div class="container-fluid"> 
<div class="navbar-inner site-top-nav"> 
    <ul class="nav navbar-nav"> 
     <li>Home</li> 
     <li>About</li> 
     <li>Services</li> 
     <li>Contact</li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li>Login</li> 
     <li>Register</li> 
    </ul> 
</div>

添加下面的CSS

.site-top-nav li{ 
    padding-left:15px; 
    padding-right:15px; 
} 

.navbar-nav>li { 
    float: left; 
}

希望這有助於。

來源

2017-06-19 11:32:39 Eggsnuff

我對現有的小提琴做了一些改動。只需添加一個css屬性在此檢查：https://jsfiddle.net/ns82ne1z/5/

.navbar-nav li{ margin-left:10px; }。

它可以幫助你。

來源

2017-06-19 11:39:55 HEGDE

這不響應 – Ehsan

如何在自舉中將菜單分成左右兩部分

回答

相關問題