Bootstrap - Loại bỏ đệm hoặc lề khi kích thước màn hình nhỏ hơn

ĐÃ CHỈNH SỬA: Có lẽ tôi nên hỏi bộ chọn nào thiết lập phần đệm bên khi màn hình được giảm chiều rộng xuống dưới 480px? Tôi đã duyệt bootstrap-responsiveness.css trong một thời gian để xác định vị trí này nhưng dường như không có gì ảnh hưởng đến điều này.

Ban đầu, về cơ bản, tôi muốn xóa mọi bộ đệm hoặc lề mặc định để đáp ứng trên màn hình thiết bị nhỏ hơn.

Tôi có một bộ chọn background colorbị ghi đè container-fluidvà đối với màn hình lớn hơn, chúng hiển thị hoàn hảo 100% theo chiều rộng nhưng chúng màn hình được giảm xuống kích thước nhỏ hơn, theo mặc định, Bootstrap dường như thêm lề hoặc đệm vào container-fluidhoặc container.

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

Nếu tôi sử dụng css tùy chỉnh để ghi đè kiểu mặc định của Bootstrap, thì tôi nên ghi đè truy vấn hoặc bộ chọn phương tiện nào để xóa phần đệm này trên màn hình nhỏ hơn?

Truy vấn @media dành riêng cho 'điện thoại' là ..

@media (max-width: 480px) { ... }

Tuy nhiên, bạn có thể muốn xóa phần đệm / lề cho bất kỳ kích thước màn hình nhỏ hơn nào. Theo mặc định, Bootstrap điều chỉnh lề / đệm cho thân, vùng chứa và thanh điều hướng ở 978px.

Dưới đây là một số truy vấn đã hoạt động (trong hầu hết các trường hợp) đối với tôi:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

Bản giới thiệu

Cập nhật cho Bootstrap 4

Sử dụng các ut giãn cách đáp ứng mới cho phép bạn đặt đệm / lề cho các độ rộng màn hình khác nhau (điểm ngắt): https://stackoverflow.com/a/43208888/171456

Vấn đề ở đây phức tạp hơn nhiều so với việc loại bỏ phần đệm vùng chứa vì cấu trúc lưới dựa vào phần đệm này khi áp dụng lề âm cho các hàng kèm theo.

Loại bỏ vùng đệm vùng chứa trong trường hợp này sẽ gây ra tràn trục x do tất cả các hàng bên trong lớp vùng chứa này gây ra, đây là một trong những điều ngu ngốc nhất về Bootstrap Grid.

Về mặt logic, nó nên được tiếp cận bởi

1. Không bao giờ sử dụng .containerlớp cho bất kỳ thứ gì khác ngoài các hàng
2. Tạo bản sao của .containerlớp không có phần đệm để sử dụng với html không phải dạng lưới
3. Để loại bỏ phần .containerđệm trên thiết bị di động, bạn có thể xóa nó theo cách thủ công bằng các truy vấn phương tiện khi overflow-x: hidden;đó không đáng tin cậy lắm nhưng hoạt động trong hầu hết các trường hợp.

Nếu bạn đang sử dụng LESS, kết quả cuối cùng sẽ như thế này

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

Thay đổi truy vấn phương tiện thành bất kỳ kích thước nào bạn muốn nhắm mục tiêu.

Suy nghĩ cuối cùng, tôi thực sự khuyên bạn nên sử dụng Foundation FrameworkGrid vì cách nó nâng cao hơn

Chủ đề này rất hữu ích trong việc tìm ra giải pháp trong trường hợp cụ thể của tôi (bootstrap 3)

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}

Để giải quyết các vấn đề như thế này, tôi đang sử dụng CSS - cách nhanh nhất và đơn giản nhất mà tôi nghĩ ... Chỉ cần sửa đổi nó theo nhu cầu của bạn ...

@media only screen and (max-width: 480px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_id {width:000px;height:000px;}
}

Cách tôi có được một phần tử để đi 100% chiều rộng của thiết bị là sử dụng lề trái và phải âm trên nó. Phần nội dung có phần đệm 24px, vì vậy, đó là những gì bạn có thể sử dụng lề âm cho:

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

Trong Bootstrap 4, lề 15px mà vùng chứa ban đầu có, xếp tầng xuống tất cả các hàng và cột. Vì vậy, một cái gì đó như thế này hiệu quả với tôi ...

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-left: 5px;
        padding-right: 5px;
    }
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
}

Tôi đã gặp sự cố này xảy ra trên các trang web sử dụng định dạng và mã tương tự và tôi đã vắt óc suy nghĩ xem đâu là chi tiết còn thiếu khiến một số trang web của tôi hoạt động và một số thì không.

Đối với Bootstrap 3: Câu trả lời cho tôi không phải là viết lại css cho lề .container-liquid, .row hoặc đặt lại lề, mô hình nhất quán mà tôi nhận ra là độ dài của các từ dài hơn đang làm mất đi thiết kế và tạo lề .

Các bước giải pháp:

1. Kiểm tra trang của bạn bằng cách tạm thời xóa các phần có chứa vùng chứa và kiểm tra trang web của bạn trên các trình duyệt nhỏ. Điều này sẽ xác định vùng chứa vấn đề của bạn.

2. Bạn có thể gặp sự cố định dạng div. Nếu bạn làm vậy, hãy sửa chữa nó. Nếu tất cả đều ổn thì:

3. Xác định xem bạn đã sử dụng các từ dài mà không bao hàm chưa. Nếu bạn không thể thay đổi từ (như dòng thẻ hoặc khẩu hiệu, v.v.)

Giải pháp 1: Định dạng phông chữ thành kích thước nhỏ hơn trong truy vấn phương tiện của bạn cho màn hình nhỏ hơn (tôi thường thấy @media (max-width: 767px) là đủ).

HOẶC LÀ:

Giải pháp 2:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

CSS của Paulius Marčiukaitis hoạt động hiệu quả cho chủ đề Genesis của tôi, đây là cách tôi sửa đổi thêm nó theo yêu cầu của tôi:

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}

Đây là những gì tôi làm cho Bootstrap 3/4

Sử dụng thùng chứa chất lỏng thay vì thùng chứa.

Thêm cái này vào CSS của tôi

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

Thao tác này sẽ xóa các lề dưới màn hình chiều rộng 1400px

Một css khác có thể gây ra vấn đề về ký quỹ là bạn có direction:someValuetrong css của mình, vì vậy chỉ cần loại bỏ nó bằng cách đặt nó thành ban đầu.

Ví dụ:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}

Giải pháp dễ dàng là viết một cái gì đó như vậy,

px-lg-1

mb-lg-5

Bằng cách thêm lg, lớp sẽ chỉ được áp dụng trên màn hình lớn