Làm cách nào để thay đổi chiều rộng thanh điều hướng/vùng chứa? Bootstrap 3

Question

Chiều rộng mặc định cho thanh điều hướng của tôi quá rộng 1170px. Tôi muốn giảm nó xuống 940px - nhưng tôi muốn giữ sự đáp ứng.

Tôi đã cố gắng thay đổi chiều rộng vùng chứa trong CSS và có vẻ ổn với trình duyệt lớn, nhưng phần còn lại của trang bị tách rời khi xem cho kích thước di động.

Đây có phải là tài sản chính xác hoặc có điều gì khác không?

@media (min-width: 1200px) { 
    .container { 
    max-width: 1170px; 
} 

Đây là mã navbar tôi

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 

      </button> 
      <a class="navbar-brand" href="#">Site Name</a> 
     </div> 

     <div class="collapse navbar-collapse"> 

      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#shop">Shop</a></li> 
      <li><a href="#showcase">Showcase</a></li> 
      <li><a href="#help">Help</a></li> 
      <li><a href="#my account">My Account</a></li> 
      <li><a href="#cart">Cart <span class="glyphicon glyphicon-shopping-cart"></span></a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 

Answer 1

độ rộng container sẽ giảm xuống 940 điểm ảnh cho khung nhìn dưới 992 pixel. Nếu bạn thực sự không muốn các vùng chứa rộng hơn 940 pixel, sau đó chuyển đến trang Bootstrap customize và đặt @container-lg-desktop thành @container-desktop hoặc mã hoá cứng 940px.

Answer 2

Tôi vừa tự giải quyết vấn đề này. Bạn đã đi đúng hướng.

@media (min-width: 1200px) { 
    .container{ 
     max-width: 970px; 
    } 
} 

Ở đây chúng tôi nói: Trên chế độ xem 1200px hoặc lớn hơn - đặt chiều rộng tối đa là 970px. Điều này sẽ ghi đè lên lớp tiêu chuẩn hiện đặt độ rộng tối đa là 1170px cho phạm vi đó.

LƯU Ý: Hãy chắc chắn rằng bạn bao gồm này SAU công cụ bootstrap.css (tất cả mọi người đã thực hiện sai lầm nhỏ này trong quá khứ).

Hy vọng điều này sẽ giúp .. chúc may mắn!

Answer 3

Đúng cách để làm điều đó là để thay đổi chiều rộng trên Customizer trực tuyến tại đây:

http://getbootstrap.com/customize/

tải về nguồn biên dịch lại, ghi đè lên dir quận bootstrap hiện có, và tải lại (tâm bộ nhớ cache của trình duyệt !! !)

Tất cả các thay đổi của bạn sẽ được giữ lại trong file cấu hình .json

để áp dụng lại tất cả các thay đổi chỉ cần tải file json và bạn đã sẵn sàng để đi

Answer 4

.navbar-static-top bạn đang sử dụng lực lượng navbar để trở thành toàn bộ chiều rộng. Loại bỏ lớp đó và bạn sẽ nhận được navbar có thể thay đổi kích thước. Sau đó, bạn có thể bọc nó trong một kích thước bạn muốn.

<div class="container"> 
<div class="row"> 
    <div class="span6 offset3"> 
     <div class="navbar"> 
      ... 
     </div> 
    </div> 
</div> 

Answer 5

Nếu bạn đang đối phó với năng động hơn độ phân giải màn hình/kích cỡ, thay vì thể xác định rõ kích thước bằng pixel bạn có thể thay đổi chiều rộng để một tỷ lệ phần trăm của chiều rộng phương tiện truyền thông như vậy

@media (min-width: 1200px) { 
    .container{ 
     max-width: 70%; 
    } 
} 

Answer 6

Xin chào công việc này bạn đã thử! trong trường hợp của bạn là.navbar-cố định-top {}

.navbar-fixed-bottom{ 
    width:1200px; 
    left:20%; 
} 

Answer 7

chỉ đơn giản:

.navbar{ 
    width:65% !important; 
    margin:0px auto; 
    left:0; 
    right:0; 
    padding:0; 
} 

hay,

.navbar.navbar-fixed-top{ 
    width:65% !important; 
    margin:0px auto; 
    left:0; 
    right:0; 
    padding:0; 
} 

Hy vọng nó hoạt động (ít nhất, cho người tìm kiếm trong tương lai)