Thay đổi chiều rộng thùng chứa Bootstrap

Question

Tôi đang sử dụng Bootstrap cho trang web của mình và tôi cần tạo một vùng chứa có kích thước 1250px, nhưng vấn đề là khi tôi thay đổi lớp Bootstrap container, phản hồi sẽ không hoạt động nữa.

Tôi nên làm gì?

Answer 1

Bạn đã thử dùng bình chứa chất lỏng cho bootstrap chưa?

Hãy thử thay đổi 'container' đến 'container chất lỏng'

Nó có thể giúp

Answer 2

Chỉ cần thiết lập 'container chất lỏng' sẽ tạo ra một container chiều rộng 100%. Gói toàn bộ thứ trong một thùng chứa chiều rộng 1250px sẽ khiến vùng chứa của bạn không được đáp ứng. Điều tốt nhất để làm là gán một 'max-width' để chứa chất lỏng của bạn, tôi đã bao gồm các đánh dấu dưới đây:

<div class="container-fluid" style="background-color:#CDCDCD; max-width:1250px"> 

container-Lỏng

Answer 3

Bạn có thể thay đổi chiều rộng của container như bạn like.For này xin vui lòng thêm những dòng css

@media (min-width: 1200px) { 
    .container { 
    width: 1250px !important; 
    } 
} 

Cảm ơn

Answer 4

bạn có thể thay đổi chiều rộng của container như bạn muốn. Để làm điều này, vui lòng thêm các dòng css sau:

.container{ 
    max-width:1250px; 
    width:100%; 
} 

Answer 5

Đặt một lớp đặc biệt như my_custom_menu vào vùng chứa menu của bạn. sau đó sao chép phong cách này dưới đây để stylesheet của bạn ....

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

cảm ơn

Answer 6

Bạn có thể cho chiều rộng để chứa trong file css của bạn:

.container { 
    width:1250px; 
} 

Sau đó viết truy vấn phương tiện truyền thông để làm cho nó đáp ứng:

@media only screen and 
(max-width : 1249px) { 

    .container { 
     width:100%; 
    } 

} 

Answer 7

Bạn có thể tạo vùng chứa tùy chỉnh và sử dụng vùng chứa đó với vùng chứa mặc định (chỉ cần ghi đè iting chiều rộng). bạn có thể thay đổi chiều rộng theo nhu cầu của bạn:

CSS:

@media (min-width: 768px) { 
.my-custom-container{ 
    width:600px; 
}} 

@media (min-width: 992px) { 
.my-custom-container{ 
    width:720px; 
}} 

@media (min-width: 1200px) { 
.my-custom-container{ 
    width:900px; 
}} 

HTML:

<div class="container my-custom-container"> 
your content Goes here ....... 
</div>