Container-liquid vs .container

Chỉ cần tải xuống 3.1 và tìm thấy trong các tài liệu ...

Biến mọi bố cục lưới có chiều rộng cố định thành bố cục toàn chiều rộng bằng cách thay đổi ngoài cùng của bạn .containerthành .container-fluid.

Nhìn vào bootstrap.css, có vẻ như .container-fluidlà giống hệt .container. Cả hai đều có cùng CSS và mọi phiên bản .container-fluidđược ghép nối với nhau .containervà tất cả các lớp cột được chỉ định theo tỷ lệ phần trăm.

Khi xoay vòng với các ví dụ tôi không thể thấy bất kỳ sự khác biệt nào, vì mọi thứ dường như trôi chảy.

Là người mới sử dụng Bootstrap, tôi cho rằng mình đang thiếu thứ gì đó. Ai đó có thể mất một phút và soi sáng cho tôi?

Phiên bản nhanh: .container có một chiều rộng cố định cho mỗi kích thước màn hình trong bootstrap (xs, sm, md, lg); .container-fluidmở rộng để lấp đầy chiều rộng có sẵn.

Sự khác biệt giữa containervà container-fluidđến từ những dòng CSS này:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Tùy thuộc vào chiều rộng của chế độ xem mà trang web đang được xem, containerlớp cung cấp cho div của nó một chiều rộng cố định cụ thể. Những dòng này không tồn tại dưới bất kỳ hình thức nào container-fluid, vì vậy chiều rộng của nó thay đổi mỗi khi chiều rộng khung nhìn thay đổi.

Vì vậy, ví dụ, giả sử cửa sổ trình duyệt của bạn rộng 1000px. Vì nó lớn hơn chiều rộng tối thiểu 992px, .containerphần tử của bạn sẽ có chiều rộng 970px. Sau đó bạn từ từ mở rộng cửa sổ trình duyệt của bạn. Độ rộng của bạn .containersẽ không thay đổi cho đến khi bạn đạt đến 1200px, tại đó nó sẽ nhảy lên rộng 1170px và giữ nguyên như vậy cho bất kỳ chiều rộng trình duyệt lớn hơn.

.container-fluidMặt khác, phần tử của bạn sẽ liên tục thay đổi kích thước khi bạn thực hiện ngay cả những thay đổi nhỏ nhất đối với chiều rộng trình duyệt của bạn.

Tôi nghĩ rằng bạn đang nói rằng containervs vs container-fluidlà sự khác biệt giữa phản ứng nhanh và không phản hồi với lưới. Điều này không đúng ... điều đang nói là chiều rộng không cố định ... chiều rộng đầy đủ của nó!

Điều này thật khó để giải thích vì vậy hãy xem các ví dụ

Ví dụ một

container-fluid:

http://www.bootply.com/119981

Vì vậy, bạn thấy cách container chiếm toàn bộ màn hình ... đó là một container-fluid.

Bây giờ, hãy nhìn vào cái khác chỉ là bình thường containervà xem các cạnh của bản xem trước

Ví dụ hai

container

http://www.bootply.com/119982

Bây giờ bạn có thấy khoảng trắng trong ví dụ không? Đó là bởi vì nó có chiều rộng cố định container! Có thể có ý nghĩa hơn khi mở cả hai ví dụ lên trong hai tab khác nhau và chuyển đổi qua lại.

BIÊN TẬP

Tốt hơn nữa đây là một ví dụ với cả hai container cùng một lúc! Bây giờ bạn thực sự có thể nói sự khác biệt!

http://www.bootply.com/119983

Tôi hy vọng điều này đã giúp làm rõ một chút!

Cả hai .containervà .container-fluidđều phản hồi (nghĩa là chúng thay đổi bố cục dựa trên chiều rộng màn hình), nhưng theo những cách khác nhau (tôi biết, việc đặt tên không làm cho âm thanh theo cách đó).

Câu trả lời ngắn:

.container là thay đổi kích thước tăng vọt / choppy

.container-fluid thay đổi kích thước liên tục / mịn ở chiều rộng: 100%.

Từ góc độ chức năng:

.container-fluidliên tục thay đổi kích thước khi bạn thay đổi độ rộng của cửa sổ / trình duyệt của mình theo bất kỳ số lượng nào, không để lại thêm khoảng trống ở hai bên, không giống như cách .containerthực hiện. (Do đó, việc đặt tên: "chất lỏng" trái ngược với "kỹ thuật số", "rời rạc", "chunked" hoặc "lượng tử hóa").

.containerthay đổi kích thước trong khối ở một số chiều rộng nhất định. Nói cách khác, nó sẽ có độ rộng cụ thể khác nhau hay còn gọi là "cố định" độ rộng khác nhau của các chiều rộng màn hình.

Ngữ nghĩa: "chiều rộng cố định"

Bạn có thể thấy làm thế nào đặt nhầm lẫn có thể phát sinh. Về mặt kỹ thuật, chúng ta có thể nói .containerlà "chiều rộng cố định", nhưng nó chỉ được cố định theo nghĩa là nó không thay đổi kích thước ở mọi chiều rộng hạt. Nó thực sự không "cố định" theo nghĩa là nó luôn giữ ở độ rộng pixel cụ thể, vì nó thực sự có thể thay đổi kích thước.

Từ góc độ cơ bản:

.container-fluidcó thuộc tính CSS width: 100%;, vì vậy nó liên tục điều chỉnh ở mọi mức độ chi tiết của chiều rộng màn hình.

.container-fluid {
  width: 100%;
}

.containercó cái gì đó như "width = 800px" (hoặc em, rem, v.v.), một giá trị độ rộng pixel cụ thể ở các độ rộng màn hình khác nhau. Tất nhiên đây là nguyên nhân khiến chiều rộng phần tử đột ngột nhảy sang độ rộng khác khi chiều rộng màn hình vượt qua ngưỡng chiều rộng màn hình. Và ngưỡng đó bị chi phối bởi các truy vấn phương tiện CSS3, cho phép bạn áp dụng các kiểu khác nhau cho các điều kiện khác nhau, chẳng hạn như phạm vi chiều rộng màn hình.

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

Vượt ra ngoài

Bạn có thể làm cho bất kỳ phần tử độ rộng cố định nào phản hồi thông qua các truy vấn phương tiện, không chỉ .containercác phần tử, vì các truy vấn phương tiện chính xác .containerlà cách bootstrap được thực hiện trong nền (xem câu trả lời của JKillian cho mã).

Sử dụng .container-fluidkhi bạn muốn trang của mình biến đổi với mỗi khác biệt nhỏ về kích thước khung nhìn của nó.

Sử dụng .containerkhi bạn muốn trang của mình biến đổi thành chỉ 4 loại kích thước , còn được gọi là "điểm dừng".

Các điểm dừng tương ứng với kích thước của chúng là:

• Thêm nhỏ: (Chỉ độ phân giải di động)
• Nhỏ: 768px (Máy tính bảng)
• Trung bình: 992px (Máy tính xách tay)
• Lớn: 1200px (Máy tính xách tay / Máy tính để bàn)

Cập nhật 2019

Sự khác biệt cơ bản containerlà quy mô đáp ứng, trong khi container-fluidluôn luôn là width:100%. Do đó, trong các định nghĩa CSS gốc, chúng xuất hiện giống nhau, nhưng nếu bạn nhìn xa hơn, bạn sẽ thấy điều đó .containerbị ràng buộc với các truy vấn phương tiện.

Bootstrap 4

Có container5 chiều rộng ...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

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

Bootstrap 3

Có container4 kích cỡ. Chiều rộng đầy đủ trên xsmàn hình và sau đó chiều rộng của nó thay đổi dựa trên các truy vấn phương tiện sau ..

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

container so với container chất lỏng

.containercó giá trị pixel chiều rộng tối đa, trong khi đó .container-fluidlà chiều rộng tối đa 100%.

.container-fluid liên tục thay đổi kích thước khi bạn thay đổi độ rộng của cửa sổ / trình duyệt của bạn bằng bất kỳ số tiền nào.

.container Thay đổi kích thước theo từng khối ở một số độ rộng nhất định, được điều khiển bởi các truy vấn phương tiện (về mặt kỹ thuật, chúng tôi có thể nói đó là chiều rộng cố định, vì giá trị pixel được chỉ định, nhưng nếu bạn dừng ở đó, mọi người có thể có ấn tượng rằng nó không thể thay đổi kích thước - tức là không phản hồi .)

Từ góc độ hiển thị .containercho phép bạn kiểm soát nhiều hơn những gì người dùng đang nhìn thấy và giúp dễ dàng xem những gì người dùng sẽ thấy khi bạn chỉ có 4 biến thể hiển thị (5 trong trường hợp bootstrap 5) vì kích thước liên quan đến giống như kích thước lưới. ví dụ như .col-xs, .col-sm, .col, và .col-lg.

Điều này có nghĩa là, khi bạn đang thực hiện kiểm tra người dùng nếu bạn kiểm tra trên màn hình với 4 kích cỡ khác nhau, bạn sẽ thấy tất cả các thông báo trong màn hình.

Khi sử dụng .container-fluidvì witdh có liên quan đến chiều rộng khung nhìn, màn hình hiển thị động, do đó, các biến thể lớn hơn nhiều và người dùng có màn hình rất lớn hoặc độ rộng màn hình không phổ biến có thể thấy kết quả mà bạn không mong đợi.

Bạn đúng trong 3.1 .container-liquid và .container giống nhau và hoạt động giống như container nhưng nếu bạn loại bỏ chúng thì nó hoạt động như .container-liquid (full width). Họ đã loại bỏ .container-liquid cho "Cách tiếp cận đầu tiên trên thiết bị di động", nhưng bây giờ nó đã trở lại trong 3.3.4 (và chúng sẽ hoạt động khác nhau)

Để có được bootstrap mới nhất, vui lòng đọc bài đăng này trên stackoverflow, nó sẽ giúp kiểm tra nó .