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

98

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;
twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— Tim
sumber
1
semoga bermanfaat leejacksondev.com/…
— Brian Dillingham
1
Dapatkah Anda memposting kode yang relevan sehingga kami dapat menyesuaikan jawaban kami dengan kode Anda?
— Simple Sandman
1
Diperbarui dengan kode! Saya ingin menghapus padding saat saya memiliki kolom, bukan hanya saat saya menggunakan baris.
— Tim
1
itu bukan solusi yang tepat! saya menyarankan dengan pergi ke jawaban bagian
— Pooja Roy

Jawaban:

127

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/

— Bagian
sumber
3
Terima kasih. Apa yang saya coba lakukan adalah menghapus padding saat saya menggunakan kolom. Ada ide bagaimana saya bisa melakukan ini?
— Tim
1
Itu hanya mungkin melalui kelas tambahan ... Saya telah menetapkan kelas bernama remove-padding yang hanya memiliki .remove-padding {padding-left: 0; padding-right: 0; margin kiri: 0; margin-right: 0} Sejauh yang saya tahu, tidak ada kelas yang telah ditentukan untuk menghapus padding standar 15px
— PArt
27
Saya tidak dapat menyadari bagaimana jawaban ini memiliki begitu banyak suara positif, sementara itu tidak mengikuti pedoman Sistem Grid Bootstrap. Aturan ketiga di bagian Pendahuluan menyatakan bahwa "Konten harus ditempatkan dalam kolom, dan hanya kolom yang boleh merupakan turunan langsung dari baris." Jawaban Lucas Nelson memberikan pendekatan yang adil untuk mencapai efek yang diinginkan tanpa melanggar aturan sintaks.
— Siavas
Anda juga dapat menggunakan rowkelas secara langsung dengan col-**-*kelas jika tata letak Anda sesuai.
— Anwar
2
Bagaimana ini bisa dipilih sebanyak 87 kali (dan terus bertambah) jika tidak menjawab pertanyaan? Pertanyaannya menyatakan bahwa itu berfungsi ketika hanya rowdigunakan ... tetapi tidak ketika kolom digunakan (yang fakta itu diabaikan dalam jawaban ini)? Bagaimanapun, saya mendapatkan padding 15px yang sama persis dengan garis besar pertanyaan dan itu sangat membuat frustrasi.
— Jeach
32

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.

— Kishore Kumar
sumber
3
Terima kasih banyak. Saya ingin menghapusnya saat saya menggunakan kolom. Saya benar-benar tidak ingin main-main dengan inti bootstrap css. Saya menduga pasti ada cara yang diberi sanksi untuk melakukan ini. Ada pemikiran?
— Tim
1
Jika Anda ingin menggunakan kolom dalam lebar penuh, Anda dapat menerapkan col-md-12 col-sm-12 css dalam baris
— Kishore Kumar
2
Terima kasih. Saya mencobanya, tetapi saya masih mendapatkan bantalan. Juga, saya butuh dua kolom. Apakah saya melewatkan sesuatu?
— Tim
1
Padding yang Anda lihat adalah default dari Bootstrap, jika Anda ingin menghilangkannya, bagaimana harus menambahkan kelas Anda sendiri. Ketika Anda menambahkan kelas baru dan ingin mengganti bootstrap Anda dapat menambahkan! Important setelah style.
— Kishore Kumar
1
Jika dua kolom Anda dapat menambahkan kelas ini untuk Anda kolom kolom-md-6
— Kishore Kumar
29

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.
— Hanya Bayangan
sumber
3
.container-fluidmasih mengandung padding-right: 15pxdan padding-left: 15px, yang berarti Anda masih tidak bisa mendapatkan flush dengan jendela menggunakan metode Anda. Anda masih perlu melakukan sesuatu seperti container-fluid px-0.
— lightyrs
2
Dalam hal ini dokumentasi merekomendasikan untuk hanya "Jatuhkan induk .container atau .container-fluid.". Saya telah memasukkan itu juga ke jawabannya.
— Just Shadow
14

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.

baris lebar penuh

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.

— Lucas Nelson
sumber
mengapa tidak hanya.full-width-row > div { padding: 0; }
— Bamieh
Itu tidak berhasil, Anda masih mendapatkan selokan di awal dan akhir baris: bootply.com/eM8y3kkfbi
— Lucas Nelson
14

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.

— Dm Mh
sumber
Untuk Bootstrap 4, ini adalah jawaban yang benar dan praktik terbaik.
— Syafiq Freman
2
@SyafiqZainal, dan juga merupakan duplikat dari jawaban asli saya di bawah (diposting lebih awal): D Jadi, sekarang saya bertanya-tanya, apakah boleh memposting jawaban yang sama di StackOverflow.
— Just Shadow
6

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

— iCrus
sumber
4
pl-0 pr-0dapat diubah menjadipx-0
— Patrick McDonald
3

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;
}
— Aaron Nuñez
sumber
3

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; }
— Tim Vermaelen
sumber
2

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

  1. Kemudian menggunakan kekhususan di bagian css lakukan ini:

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

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

— Sahil Kumar Singh
sumber
2
Bagaimana px-0mengatur padding kiri dan kanan untuk Bootstrap 4
— Vincent Liong
1

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

— Stefan
sumber
1

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

— Dave
sumber
2
dapat menghindari gaya dan sebagai gantinya menambahkan kelas utilitasp-0
— iCrus
0

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.

— Max Flanagan
sumber
0

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

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.

— Wenhe Qi
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.