Question

我正在尝试在bootstrap 3.x中创建一个导航栏。但是我尝试将菜单左右分开时遇到问题（JsFiddle），如下例所示。

Home - About - Services - Contact                                           Login - Register

但是我的代码得到的结果是这样的：

Home - About -                                                                     Login
Services - Contact                                                               Register

这是我目前的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

我尝试过其他方法，但是我无法获得所需的效果。

Answer 1

我对你现有的小提琴做了一些改动。只需要添加一个css属性在这里查看：https://jsfiddle.net/ns82ne1z/5/

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

它可能对你有所帮助。

Answer 2

将float: left属性用于其他ul元素，将display: inline-block用于li元素

尝试使用此Jsfiddle code updated

Answer 3

以下示例

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

如果它有助于标记为答案。

Answer 4

您需要执行类似我将在下面链接的代码：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

希望这适用于您，任何问题请报告回来。它适用于小提琴，因此它应该适用于您的项目。

祝你好运！[/ p>

Answer 5

编辑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;
}

希望这有帮助。

如何在bootstrap中左右分割菜单

5 个答案: