Question

如何使用最右侧的2个链接将我的导航链接与bootstrap和CSS对中。我稍后会用按钮和图形替换这两个链接。

以下是目前看来的链接。主导航需要居中，2个链接最右边。 http://www.woodenpalette.com/index2.html

这是我到目前为止所做的：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Links -->
  <ul class="navbar-nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="drawings.html">Drawings</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="eBook.html">Book</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="learn_how_to_draw.html">Learn</a>
    </li>     
    <li class="nav-item">
      <a class="nav-link" href="drawing_workshops.html">Workshops</a>
    </li>    
    <li class="nav-item">
      <a class="nav-link" href="contact.php">Contact</a>
    </li>
  </ul>
    <ul class="nav justify-content-end">
        <a class="nav-link" href="contact.php">Login</a> |
        <a class="nav-link" href="contact.php">Register</a>
    </ul>    
</nav>

.navbar {
  clear:        both;
  width:        100%;
  margin-left:  auto;
  margin-right: auto;
}

.navbar ul{
    text-align:     center;
    float:          right;
    margin:         auto;
    overflow:       hidden;
}

Answer 1

以下是更正：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
      data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav fix-center">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Drawings</a></li>
        <li><a href="#">Book</a></li>
        <li><a href="#">Learn</a></li>
        <li><a href="#">Workshop</a></li>
      </ul>
      <ul class="nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign 
         Up</a>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 
          Login</a>
        </li>
      </ul>
    </div>
 </div>

.fix-center{
  display:block;
  margin:0 auto;
  text-align:center;
 }
.nav li{
  display:inline-block;
}
.navbar-right{
  position:absolute;
  right:0;
  top:0;
 }

Bootstrap中心导航，登录远远

1 个答案: