Bootstrap 3 dan 4.container-fluid dengan grid menambahkan bantalan yang tidak diinginkan

Saya ingin konten saya berubah-ubah, tetapi saat menggunakan .container-fluiddengan grid Bootstrap, saya masih melihat padding. Bagaimana cara menghilangkan padding?

Saya melihat bahwa saya tidak mendapatkan padding dengan .row, tetapi saya ingin menambahkan kolom, dan segera setelah saya melakukannya, padding sudah kembali: O.

Saya ingin dapat menggunakan kolom dengan lebar penuh.

Sebuah contoh:

<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>

Solusi yang saya punya:

Timpa bootstrap.css, linke 1427 & 1428 (v3.2.0)

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

untuk

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

Anda juga harus menambahkan "baris" ke setiap penampung yang akan "memperbaiki" masalah ini!

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

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

Silakan temukan css sebenarnya dari Bootstrap

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

Saat Anda menambahkan .container-fluidkelas, itu menambahkan bantalan horizontal 15px, dan hal yang sama akan dihapus saat Anda menambahkan .rowkelas sebagai elemen anak dengan margin negatif yang ditetapkan pada baris.

5 tahun berlalu, dan cukup aneh bahwa ada begitu banyak jawaban di sana yang tidak mengikuti (atau bertentangan) dengan aturan bootstrap atau tidak benar-benar menjawab pertanyaannya ...

Jawaban Singkat:
Cukup gunakan no-gutterskelas Bootstrap di baris Anda untuk menghapus padding:

  <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>

(Juga Anda lupa menambahkan </div>ke bagian akhir file Anda. Ini telah diperbaiki pada kode di atas juga)

catatan:

Ada kalanya Anda juga ingin melepaskan bantalan wadah itu sendiri. Dalam hal ini pertimbangkan untuk menjatuhkan .containeratau .container-fluidkelas seperti yang direkomendasikan oleh dokumentasi .

<!--<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>-->

Jawaban panjang:

The paddings Anda mendapatkan benar-benar didokumentasikan dalam Bootstrap ini dokumentasi :

Baris adalah pembungkus untuk kolom. Setiap kolom memiliki bantalan horizontal (disebut talang) untuk mengontrol ruang di antara mereka. Padding ini kemudian diimbangi pada baris dengan margin negatif . Dengan cara ini, semua konten di kolom Anda sejajar secara visual di sisi kiri.

Dan tentang solusinya, yang juga didokumentasikan:

Kolom memiliki bantalan horizontal untuk membuat talang di antara kolom individual, namun, Anda dapat menghapus margin dari baris dan bantalan dari kolom dengan .no-gutters di .row.

Mengenai menjatuhkan wadah:

Butuh desain edge-to-edge? Jatuhkan induk .container atau .container-fluid.

Bonus: Tentang kesalahan yang ditemukan di jawaban lain

• Hindari meretas kelas kontainer bootstrap daripada memastikan bahwa Anda telah memasukkan semua konten dalam col-s dan membungkusnya dengan row-s seperti yang dikatakan dalam dokumentasi :

Dalam tata letak kisi, konten harus ditempatkan dalam kolom dan hanya kolom yang mungkin merupakan turunan langsung dari baris.

• Jika Anda masih harus melakukan peretasan (untuk berjaga-jaga jika seseorang sudah mengacaukan sesuatu dan Anda perlu segera memperbaiki masalah Anda) pertimbangkan untuk menggunakan Bootstrap px-0untuk menghapus bantalan horizontal sebagai gantinya pl-0 pr-0atau menciptakan kembali gaya Anda.

Saya pikir saya memiliki persyaratan yang sama dengan Tim, tetapi tidak ada jawaban yang menyediakan 'kolom tepi-ke-tepi viewport dengan solusi talang internal normal'. Atau cara lain untuk mengatakannya: bagaimana saya bisa membuat kolom pertama dan terakhir saya masuk ke padding wadah dan mengalir ke tepi viewport, sambil tetap mempertahankan talang normal di antara kolom.

Dari apa yang saya tahu, tidak ada solusi yang rapi dan bersih. Inilah yang berhasil untuk saya, tetapi di luar apa pun yang akan didukung oleh Bootstrap. Tetapi berfungsi untuk saat ini (Bootstrap 3.3.5 & 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

Contoh HTML:

<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;
}

Triknya adalah dengan membuat sarang divdi antara baris dan kolom untuk menghasilkan margin ekstra -15px untuk didorong ke dalam padding kontainer. Margin negatif ekstra menciptakan gulir horizontal (ke dalam spasi) pada area pandang kecil. Menambahkan overflow-x: hiddenke .rowdiperlukan untuk menekannya.

Ini bekerja sama untuk .container-fluid sebagai .container.

Jadi inilah ringkasan singkat untuk Bootstrap 4:

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

Ini bekerja untuk saya.

Mengapa tidak meniadakan padding yang ditambahkan oleh container-fluid dengan menandai padding kiri dan kanan sebagai 0?

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

cara yang lebih baik? tidak ada bantalan sama sekali di tingkat wadah (pembersih)

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

Anda hanya membutuhkan properti CSS ini di kelas .container dari Bootstrap dan Anda dapat meletakkan di dalamnya sistem grid normal tanpa seseorang yang konten kontainernya akan keluar darinya (tanpa scroll-x di viewport).

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;
}

Dalam versi alfa baru mereka telah memperkenalkan kelas penspasian utilitas . Strukturnya kemudian dapat diubah jika Anda menggunakannya dengan cara yang cerdas.

Jarak kelas utilitas

<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-0dan pr-0akan menghapus bantalan depan dan belakang dari kolom. Satu masalah tersisa adalah baris kolom yang disematkan, karena baris tersebut masih memiliki margin negatif. Pada kasus ini:

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

Perbedaan versi

Perhatikan juga kelas jarak utilitas diubah sejak versi 4.0.0-alpha.4. Sebelum mereka dipisahkan oleh 2 strip misalnya => p-x-0dan p-l-0dan seterusnya ...

Untuk tetap pada topik untuk versi 3: Inilah yang saya gunakan pada proyek Bootstrap 3 dan termasuk pengaturan kompas, untuk utilitas jarak khusus ini, ke bootstrap-sass(versi 3) atau bootstrap(versi 4.0.0-alpha.3) dengan tanda hubung ganda ataubootstrap (versi 4.0.0-alpha.4 dan yang lebih baru) dengan satu tanda hubung.

Juga, versi terbaru naik 'hingga rasio 5 kali lipat (mis: pt-5padding-top 5), bukan hanya 3.

Kompas

$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";

Keluaran CSS

Anda tentu saja dapat selalu menyalin / menempelkan kelas spasi pengisi hanya dari file css yang dihasilkan.

.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; }

Saya pikir tidak ada yang memberikan jawaban yang benar untuk pertanyaan itu. Solusi kerja saya adalah: 1. Cukup deklarasikan kelas lain bersama dengan contoh kelas wadah-cairan (.maxx):

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

2. Kemudian menggunakan kekhususan di bagian css lakukan ini:

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

Ini akan bekerja 100% dan akan menghilangkan bantalan dari kiri dan kanan. Saya harap ini membantu.

Jika Anda bekerja dengan konfigurator, Anda dapat menyetel @grid-gutter-widthdari 30pxmenjadi0

Saya telah menggunakan <div class="container-fluid" style="padding: 0px !important"> dan tampaknya berfungsi.

Saya telah berjuang dengan ini sendiri dan saya akhirnya percaya saya telah menemukannya. Sungguh luar biasa betapa banyak jawaban yang gagal untuk pertanyaan ini

Yang harus Anda lakukan adalah melepaskan padding dari semua elemen .col Anda, dan juga menghilangkan padding dari .container-fluid.

Saya melakukan ini di proyek saya sendiri sedikit sembarangan dengan menambahkan yang berikut ini ke file css saya:

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

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

Saya hanya memiliki ukuran kolom yang berbeda untuk menjelaskan semua ukuran kolom yang berbeda yang saya gunakan. Saya yakin ada cara yang lebih bersih untuk menulis css tetapi ini menggambarkan hasil akhirnya.

Gunakan px-0di containerdan no-guttersdi rowuntuk melepas bantalan.

Mengutip dari Bootstrap 4 - Sistem grid :

Baris adalah pembungkus untuk kolom. Setiap kolom memiliki bantalan horizontal (disebut talang) untuk mengontrol ruang di antara mereka. Padding ini kemudian diimbangi pada baris dengan margin negatif. Dengan cara ini, semua konten di kolom Anda sejajar secara visual di sisi kiri.

Kolom memiliki bantalan horizontal untuk membuat selokan di antara kolom individual, namun, Anda dapat menghapus margin dari baris dan bantalan dari kolom dengan .no-guttersdi .row.

Berikut ini adalah demo langsung:

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>

Alasan mengapa ini berhasil adalah itu container-fluiddan colkeduanya memiliki bantalan berikut:

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

px-0dapat menghapus bantalan horizontal dari container-fluiddan no-guttersdapat menghapus bantalan dari col.