trung tâm danh sách không có thứ tự navbar - bootstrap 3

Question

Vì vậy, Im cố gắng căn giữa các mục danh sách thanh điều hướng của tôi. Vì không có chức năng tiện ích cho tác vụ này, tôi đã phát minh ra mã sau đặt danh sách thứ tự trong một cột trong một hàng. Nhưng danh sách là vẫn hợp lý để rời khỏi ngay cả sau khi tôi cố gắng tập trung với cái cũ 'text-align: center'

<div class="navbar navbar-fixed-top "> 
    <!--<a class="navbar-brand" href="#">Title</a> --> 
    <div class= "row"> 
     <div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

tôi đã có thể con số này ra một mình. Không chắc chắn nếu đó là giải pháp tốt nhất:

 <div class="navbar navbar-fixed-top">     
        <div style="border:1px solid black" class="container"> 
      <div class="inner-nav"> 
       <!--<a href="#" class="navbar-brand">Title</a> --> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="/" >Home</a></li> 
        <li><a href="#" >About</a></li> 
        <li><a href="#" >Projects</a></li> 
        <li><a href="#" >contact</a></li> 
       </ul> 
      </div> 
        </div>     
      </div> 

tôi sau đó thêm các phong cách sau đây để bootstrap.css:

/* ADDED for centering navbar items */ 
.navbar .inner-nav ul { 
position:relative;left:50%;float:left;margin-right:0;margin-left:0; 
} 

/* ADDED for centering navbar items */ 
.navbar .inner-nav li { 
position:relative;right:50%;float:left;margin:0;list-style:none 
} 

Answer 2

Dưới đây là đoạn code tôi đã làm ngày hôm qua, hoạt động tốt với Bootstrap 3 RC1. Hy vọng điều này sẽ giúp bạn.

   <nav class="navbar navbar-fixed-top">     
         <div class="container">       
          <a href="#" class="navbar-brand">Title</a> 
          <ul class="nav navbar-nav"> 
           <li class="active"><a href="#" >Home</a></li> 
           <li><a href="#" >Services</a></li> 
          </ul>                   
         </div>     
       </nav>    

Hãy cho tôi biết nếu sự cố vẫn còn đó.

Edit: Removed đánh dấu không cần thiết

Answer 3

bước tôi mất:

• Di float: left từ danh sách và danh sách các yếu tố
• Sử dụng display: inline để thay thế cho các yếu tố danh sách
• Đặt liên kết đến display: inline-block để họ giữ kích khối của họ
• Chỉ cần thêm text-align: center để thanh điều hướng để tập trung tất cả mọi thứ
• Bọc trong truy vấn phương tiện truyền thông danh sách để dọc trên điện thoại di động không bị ảnh hưởng

Kết quả CSS thêm một phong cách .navbar-centered:

@media (min-width: 768px) { 
    .navbar-centered .navbar-nav { 
     float: none; 
     text-align: center; 
    } 
    .navbar-centered .navbar-nav > li { 
     float: none; 
    } 
    .navbar-centered .nav > li { 
     display: inline; 
    } 
    .navbar-centered .nav > li > a { 
     display: inline-block; 
    } 
} 

Sử dụng bằng cách áp dụng .navbar-centered phong cách để navbar:

<div class="navbar navbar-default navbar-centered" role="navigation"> 
    ... 
</div>