Bootstrap: làm cách nào để thay đổi chiều rộng của container?

125

Tôi đã sử dụng Twitter Bootstrap để phát triển một trang web với lớp container cố định, nhưng bây giờ khách hàng muốn trang web có chiều rộng 1000px chứ không phải 1170px. Tôi không sử dụng các tập tin .less.

Có một cách nhanh chóng để khắc phục điều này?

twitter-bootstrap

— alex
nguồn

Tham khảo câu trả lời ở đây , tôi nghĩ rằng vấn đề của bạn sẽ được giải quyết bằng câu đố chỉ cố định trong câu trả lời đó.

— Prem

@prem, tx nhưng tôi không lấy ví dụ vì nó không sử dụng bất kỳ lớp bootstrap nào như span hoặc container. Tất cả những gì tôi nghĩ rằng tôi cần cho dự án này là đặt max của container thành 940px với bootstrap đáp ứng.

— alex

75

Chuyển đến phần Tùy chỉnh trên trang web Bootstrap và chọn kích thước bạn thích. Bạn sẽ phải thiết lập @gridColumnWidthvà @gridGutterWidthcác biến.

Ví dụ: @gridColumnWidth = 65pxvà @gridGutterWidth = 20pxkết quả trên một 1000pxbố cục.

Sau đó tải về nó.

— albertedevigo
nguồn

người ta không thể đạt tới vùng chứa 1000px chính xác bằng cách thay đổi các biến lướiColumnWidth và GridGutterWidth ... bởi vì (12 * (GridColumnWidth) + 12 (GridGutterWidth)) không bằng 1000. Và do đó, tôi chỉ đưa ra giải pháp đó. Đúng không?

— Prem

15

Về mặt lý thuyết, có những kết hợp vô hạn khớp với 1000px. Một ví dụ: 12 * 65 + 11 * 20 = 1000 (chỉ có 11 máng xối giữa các cột).

— albertedevigo

Huh! tôi thực sự không nhận ra điều đơn giản ... dù sao thì bạn là giải pháp thích hợp.

— Prem

Cảm ơn bài đăng của bạn, nó rất hữu ích;) Chỉ cần một lưu ý: Thực tế sẽ có chính xác 7 giải pháp sử dụng pixel đầy đủ cho chiều rộng 1000px. (chiều rộng colum 10, 21, 32, 43, 54, 65 và 76)

— dfherr

@dfherr Tôi không biết chính xác ý bạn là gì khi bạn nói "thực tế", nhưng xin lưu ý rằng CSS hỗ trợ các giá trị thập phân cho pixel. Do đó, có những giải pháp vô hạn. w3.org/TR/CSS21/syndata.html#length-units

— albertedevigo

228

Đây là giải pháp:

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

Ưu điểm của việc này, so với việc tùy chỉnh Bootstrap như trong câu trả lời của @ Bastardo , là nó không thay đổi tệp Bootstrap. Ví dụ: nếu sử dụng CDN, bạn vẫn có thể tải xuống hầu hết Bootstrap từ CDN.

— mcbam
nguồn

10

Hầu hết các câu trả lời bỏ qua CDN. Câu trả lời của bạn là một giải pháp hoàn hảo.

— Charles Watson

2

Nó hoàn hảo cho những người đang sử dụng CDN. Sửa đổi LESS (khi 4 đến, SASS) tại thời điểm xây dựng là hoàn hảo cho những người lưu trữ CSS Bootstrap của riêng họ. Tuy nhiên, sửa đổi LESS tùy chỉnh (hoặc SASS) được nhập sau khi được cung cấp có nghĩa là bạn có thể nâng cấp LESS cơ bản mà không (thường) thực hiện một khác biệt.

— Greg Pettit

2

Tôi biết điều này thực sự muộn, nhưng các container được cung cấp có xu hướng lớn hơn bây giờ nếu bạn thêm chiều rộng: tự động vào mã ở trên, bạn có thể làm cho các container lớn hơn 1170 max của chúng.

— Rick Calder

Đó là những gì tôi đang tìm kiếm. Cảm ơn bạn.

— gấu bông

20

Bạn đang buộc một người đứng sau lưng nói rằng bạn sẽ không sử dụng các tệp LESS. Tôi đã xây dựng chủ đề Twitter Bootstrap đầu tiên của mình bằng 2.0 và tôi đã làm mọi thứ trong CSS - tạo tệp override.css. Phải mất nhiều ngày để mọi thứ hoạt động chính xác.

Bây giờ chúng ta có 3.0. Để tôi đảm bảo với bạn rằng sẽ mất ít thời gian hơn để học LESS, điều này khá dễ dàng nếu bạn cảm thấy thoải mái với CSS, hơn là thực hiện tất cả các phần ghi đè CSS điên rồ đó. Thực hiện các thay đổi như những gì bạn muốn là một miếng bánh.

Trong Bootstrap 3.0, lớp container kiểm soát độ rộng và tất cả các kiểu được chứa sẽ điều chỉnh để điền vào vùng chứa. Các biến chiều rộng vùng chứa nằm ở dưới cùng của tệp biến.less.

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

Một số trang web không có đủ nội dung để lấp đầy màn hình 1020 hoặc bạn muốn khung hẹp hơn vì lý do thẩm mỹ. Vì BS sử dụng lưới 12 cột nên tôi sử dụng bội số như 960.

— Bastardo Sucio
nguồn

4

Hoạt động, nhưng: tên biến là @container-sm, @container-mdvà @container-lg(bây giờ)

— Andreas Dolk

1

@Bastardo tên đẹp +1

— Ömer

18

@mcbjam đã đưa ra câu trả lời này nhưng đây là một lời giải thích thêm một chút.

Bạn có thể dễ dàng thực hiện thay đổi bằng truy vấn phương tiện trong tệp CSS của mình mà không cần tải xuống BS. Tôi chỉ làm điều này và nó hoạt động rất đẹp.

Giá trị "chiều rộng tối thiểu" của truy vấn phương tiện sẽ yêu cầu CSS thay đổi độ rộng của vùng chứa của bạn thành 1000px chỉ trên các màn hình lớn hơn 1200px (hoặc bất kỳ chiều rộng nào bạn chọn đưa vào đó). Điều này bảo tồn khả năng phản hồi của trang web của bạn, vì vậy khi kích thước màn hình nhảy xuống dưới giá trị đó (màn hình nhỏ hơn, máy tính bảng, điện thoại thông minh, v.v.), trang web của bạn vẫn sẽ điều chỉnh để phù hợp với màn hình nhỏ hơn.

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

— Jeff Schwarting
nguồn

13

Đối với bootstrap 4 nếu bạn đang sử dụng Sass thì đây là biến cần chỉnh sửa

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Để ghi đè biến này, tôi đã khai báo $ container-max-width mà không có mặc định! Trong tệp .sass của tôi trước khi nhập bootstrap.

Lưu ý: Tôi chỉ cần thay đổi giá trị xl vì vậy tôi không quan tâm đến việc nghĩ về các điểm dừng.

— Gambare Kaizoku
nguồn

12

Đặt lớp bộ chứa nội dung của riêng bạn với thuộc tính chiều rộng 1000px và sau đó sử dụng lớp boostrap chứa chất lỏng thay vì vùng chứa.

Hoạt động nhưng có thể không phải là giải pháp tốt nhất.

— Địa lý
nguồn

6

Sử dụng bộ chọn trình bao bọc và tạo một thùng chứa có chiều rộng 100% bên trong trình bao bọc đó để đóng gói toàn bộ trang.

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

Bây giờ chiều rộng tối đa được đặt thành 1000px và bạn không cần ít hơn hoặc sass.

— Larry Judd
nguồn

0

Kích thước container

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

trong phần Kích thước container, thay đổi 1140thành970

Tôi hy vọng nó sẽ giúp bạn.

cảm ơn bạn đã chính xác liên kết để tùy chỉnh bootstrap: https://getbootstrap.com/docs/3.4/customize/

— Vậy nên
nguồn

-3

Thêm những mảnh CSS này trong kiểu css của bạn. Tốt hơn hết là thêm nó sau khi tập tin css bootstrap được thêm vào để ghi đè lên cùng.

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`

— Đại thừa
nguồn