Bootstrap 3 và 4 .container-chất lỏng với lưới thêm phần đệm không mong muốn

Tôi muốn nội dung của mình trôi chảy, nhưng khi sử dụng .container-fluidvới lưới của Bootstrap, tôi vẫn thấy phần đệm. Làm thế nào tôi có thể thoát khỏi lớp đệm?

Tôi thấy rằng tôi không nhận được phần đệm bằng .row, nhưng tôi muốn thêm các cột và ngay sau khi tôi làm như vậy, phần đệm đã quay trở lại: O.

Tôi muốn có thể sử dụng các cột ở độ rộng đầy đủ.

Một ví dụ:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

Giải pháp tôi đã có:

Ghi đè bootstrap.css, linke 1427 & 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

đến

padding-right: 0px;
padding-left: 0px;

Bạn cũng nên thêm một "hàng" vào mỗi vùng chứa để "khắc phục" sự cố này!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

Xem http://jsfiddle.net/3px20h6t/

Vui lòng tìm css thực tế từ Bootstrap

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

Khi bạn thêm một .container-fluidlớp, nó sẽ thêm một khoảng đệm ngang 15px và điều tương tự sẽ bị xóa khi bạn thêm một .rowlớp làm phần tử con bằng cách đặt lề âm trên hàng.

5 năm trôi qua, và thật kỳ lạ là có rất nhiều câu trả lời ở đó không tuân theo (hoặc chống lại) các quy tắc bootstrap hoặc không thực sự trả lời câu hỏi ...

Câu trả lời ngắn gọn:
Chỉ cần sử dụng no-gutterslớp Bootstrap trong hàng của bạn để loại bỏ phần đệm:

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(Ngoài ra, bạn đã quên thêm </div>vào cuối tệp của mình. Nó cũng được sửa trong mã ở trên)

Ghi chú:

Có những trường hợp bạn cũng muốn loại bỏ phần đệm của hộp chứa. Trong trường hợp này, hãy xem xét việc bỏ .containerhoặc .container-fluidcác lớp theo khuyến nghị của tài liệu .

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

Câu trả lời dài:

Các phần đệm bạn nhận được thực sự được ghi lại trong tài liệu của Bootstrap :

Hàng là trình bao bọc cho các cột. Mỗi cột có đệm ngang (được gọi là máng xối) để kiểm soát không gian giữa chúng. Phần đệm này sau đó được chống lại trên các hàng có biên âm . Bằng cách này, tất cả nội dung trong các cột của bạn được căn chỉnh trực quan xuống phía bên trái.

Và về giải pháp, cũng đã được ghi lại:

Các cột có đệm ngang để tạo rãnh giữa các cột riêng lẻ, tuy nhiên, bạn có thể xóa lề khỏi các hàng và đệm khỏi cột có .no-gutters trên .row.

Về việc làm rơi hộp đựng:

Bạn cần một thiết kế hoàn thiện? Bỏ .container gốc hoặc .container-chất lỏng.

Phần thưởng: Về những sai lầm được tìm thấy trên các câu trả lời khác

• Tránh hack các lớp vùng chứa của bootstrap thay vì đảm bảo rằng bạn đã đặt tất cả nội dung trong col-s và bọc chúng bằng row-s như tài liệu hướng dẫn :

Trong bố cục lưới, nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.

• Nếu bạn vẫn phải thực hiện hack (đề phòng ai đó đã làm rối tung mọi thứ và bạn cần nhanh chóng khắc phục sự cố của mình), hãy cân nhắc sử dụng Bootstrap's px-0để loại bỏ các đệm ngang thay thế pl-0 pr-0hoặc tạo lại phong cách của bạn.

Tôi nghĩ rằng tôi đã có yêu cầu giống như Tim, nhưng không có câu trả lời nào cung cấp giải pháp 'các cột từ cạnh đến cạnh của khung nhìn với các máng xối bên trong bình thường'. Hay nói một cách khác: làm cách nào để cột đầu tiên và cột cuối cùng của tôi đột nhập vào vùng đệm vùng chứa và chảy đến cạnh của khung nhìn, trong khi vẫn duy trì các rãnh thông thường giữa các cột.

Từ những gì tôi có thể nói, không có giải pháp nào gọn gàng và sạch sẽ. Đây là những gì phù hợp với tôi, nhưng nó nằm ngoài bất kỳ thứ gì sẽ được Bootstrap hỗ trợ. Nhưng nó hoạt động ngay bây giờ (Bootstrap 3.3.5 & 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

HTML mẫu:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

CSS:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

Bí quyết là lồng một dấu divvào giữa hàng và cột để tạo lề -15px bổ sung để đẩy vào vùng đệm vùng chứa. Lề âm thừa tạo ra cuộn ngang (vào khoảng trắng) trên các khung nhìn nhỏ. Thêm overflow-x: hiddenvào.row là cần thiết để ngăn chặn nó.

Điều này hoạt động tương tự .container-fluidnhư .container.

Vì vậy, đây là bản tóm tắt ngắn gọn cho Bootstrap 4:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

Nó làm việc cho tôi.

Tại sao không phủ định phần đệm được thêm bởi chất lỏng chứa bằng cách đánh dấu phần đệm bên trái và bên phải là 0?

<div class="container-fluid pl-0 pr-0">

cách tốt hơn? không có đệm ở cấp độ thùng chứa (sạch hơn)

<div class="container-fluid pl-0 pr-0">

Bạn chỉ cần các thuộc tính CSS này trong lớp .container của Bootstrap và bạn có thể đặt bên trong hệ thống lưới bình thường mà không có người nào đó nội dung của vùng chứa sẽ nằm ngoài anh ta (không có scroll-x trong khung nhìn).

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

Trong các phiên bản alpha mới, họ đã giới thiệu các lớp giãn cách tiện ích . Cấu trúc sau đó có thể được điều chỉnh nếu bạn sử dụng chúng một cách thông minh.

Khoảng cách giữa các lớp tiện ích

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0và pr-0sẽ xóa phần đệm ở đầu và cuối khỏi cột. Một vấn đề còn lại là các hàng được nhúng của một cột, vì chúng vẫn có lề âm. Trong trường hợp này:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

Phiên bản khác biệt

Cũng lưu ý rằng các lớp giãn cách tiện ích đã được thay đổi kể từ phiên bản 4.0.0-alpha.4. Trước khi chúng được phân tách bằng 2 dấu gạch ngang, ví dụ => p-x-0vàp-l-0 và vân vân ...

Để tiếp tục chủ đề cho phiên bản 3: Đây là những gì tôi sử dụng trên các dự án Bootstrap 3 và bao gồm thiết lập la bàn, cho tiện ích khoảng cách cụ thể này, thành bootstrap-sass(phiên bản 3) hoặc bootstrap(phiên bản 4.0.0-alpha.3) với dấu gạch ngang kép hoặc bootstrap(phiên bản 4.0.0-alpha.4 trở lên) với các dấu gạch ngang.

Ngoài ra, (các) phiên bản mới nhất tăng 'lên đến 5 lần một tỷ lệ (ví dụ: pt-5padding-top 5) thay vì chỉ 3.

La bàn

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

Đầu ra CSS

Tất nhiên, bạn có thể luôn sao chép / dán các lớp khoảng cách đệm chỉ từ tệp css đã tạo.

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

Tôi nghĩ rằng không ai đã đưa ra câu trả lời chính xác cho câu hỏi. Giải pháp làm việc của tôi là: 1. Chỉ cần khai báo một lớp khác cùng với ví dụ lớp container-chất lỏng (.maxx):

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

2. Sau đó, sử dụng tính cụ thể trong phần css để làm điều này:

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

Thao tác này sẽ hoạt động 100% và sẽ loại bỏ phần đệm từ trái và phải. Tôi hi vọng cái này giúp được.

Nếu bạn đang làm việc với configuratior bạn có thể thiết lập @grid-gutter-widthtừ 30pxđến0

Tôi đã sử dụng <div class="container-fluid" style="padding: 0px !important"> và nó dường như đang hoạt động.

Bản thân tôi cũng đang đấu tranh với điều này và cuối cùng tôi tin rằng mình đã hiểu ra. Thật khó tin là có bao nhiêu câu trả lời thất bại cho câu hỏi này

Tất cả những gì bạn phải làm là xóa phần đệm khỏi tất cả các phần tử .col của bạn và xóa phần đệm cũng khỏi .container-liquid.

Tôi đã làm điều này trong dự án của riêng mình một cách cẩu thả bằng cách thêm phần sau vào tệp css của tôi:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

Tôi chỉ có các kích thước col khác nhau ở đó để tính cho tất cả các kích thước col khác nhau mà tôi đang sử dụng. Tôi tin rằng có một cách rõ ràng hơn để viết css nhưng điều này minh họa kết quả cuối cùng.

Sử dụng px-0trên containervà no-gutterstrên rowđể loại bỏ các đệm.

Trích dẫn từ Bootstrap 4 - Hệ thống lưới :

Hàng là trình bao bọc cho các cột. Mỗi cột có đệm ngang (được gọi là máng xối) để kiểm soát không gian giữa chúng. Phần đệm này sau đó được chống lại trên các hàng có biên âm. Bằng cách này, tất cả nội dung trong các cột của bạn được căn chỉnh trực quan xuống phía bên trái.

Các cột có phần đệm ngang để tạo rãnh giữa các cột riêng lẻ, tuy nhiên, bạn có thể xóa lề khỏi các hàng và phần đệm khỏi các cột có .no-gutterstrên .row.

Sau đây là một bản demo trực tiếp:

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

Lý do điều này hoạt động là như vậy container-fluidvà colcả hai đều có phần đệm sau:

padding-right: 15px;
padding-left: 15px;

px-0có thể loại bỏ đệm ngang khỏi container-fluidvà no-gutterscó thể loại bỏ đệm từ col.