Làm cách nào để căn chỉnh tiêu đề thương hiệu và liên kết còn lại trong thanh điều hướng Bootstrap?

Question

Tôi mới sử dụng Bootstrap và tôi đang nghiên cứu để tìm hiểu về thanh điều hướng. Tôi nhận thấy rằng khi trình duyệt có chiều rộng toàn màn hình (rộng), tiêu đề thương hiệu và các neo điều hướng sẽ hướng về phía bên trái giữa trang, thay vì căn chỉnh ở bên trái của trang, như khi cửa sổ nhỏ hơn. Làm thế nào tôi có thể làm cho văn bản trong thanh điều hướng ôm bên trái của trang? Bất kể bao nhiêu cửa sổ trình duyệt được tôi muốn để có thể làm cho nó dính vào bên trái của cửa sổ. Có lý do cụ thể không để làm điều này?

Đây là live demo on jsFiddle. Lưu ý rằng nếu bạn kéo tay cầm và mở rộng khung nhìn càng nhiều càng tốt sang bên trái, văn bản cuối cùng sẽ di chuyển về phía trung tâm của thanh điều hướng.

Đánh dấu thanh điều hướng của tôi giống với bản demo khởi động được cung cấp với bootstrap, tôi biết các tính năng và biểu tượng đáp ứng không được nối trong fiddle, tuy nhiên chúng đang hoạt động trên dự án cục bộ của tôi và không liên quan đến câu hỏi. Tôi tưởng tượng tôi cần phải căn chỉnh văn bản trái CSS tùy chỉnh của tôi, tuy nhiên nỗ lực của tôi để áp dụng điều này đã thất bại. Bất kì sự trợ giúp nào đều được đánh giá cao.

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <a class="brand" href="#">Project name</a> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 
     </div> 
    </div> 

Answer 1

Nhãn hiệu được "căn giữa" vì nó nằm trong div chứa và div vùng chứa này luôn được căn giữa với chiều rộng khác nhau dựa trên chiều rộng của cổng xem hoặc cửa sổ trình duyệt của bạn.

Tôi sẽ khuyên bạn nên giữ nó theo cách đó bởi vì nó mang lại cho nó một cái nhìn đối xứng hơn. Nếu bạn vẫn muốn thay đổi, tất cả những gì bạn cần làm là xóa liên kết thương hiệu khỏi div vùng chứa. Giống như vậy:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <a class="brand" href="#">Project name</a> 
     <div class="container"> 
     <div class="nav-collapse collapse"> 
     ... 

Answer 2

Có thể có cách đơn giản hơn để thực hiện việc này (với các phiên bản khởi động gần đây nhất).

Chỉ cần thay thế <div class="container"> theo <div class="container-fluid">.

Điều này sẽ đảm bảo rằng vùng chứa cho nội dung của tiêu đề của bạn trải rộng toàn bộ trang.

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <a class="brand" href="#">Project name</a> 
    <div class="nav-collapse collapse"> 
...