Bootstrap - Menghapus padding atau margin saat ukuran layar lebih kecil

DIEDIT: Mungkin saya harus bertanya pemilih mana yang mengatur padding samping ketika layar dikurangi menjadi di bawah lebar 480px? Saya telah menjelajahi bootstrap-responsiveness.css untuk sementara waktu untuk menemukan ini tetapi sepertinya tidak ada yang mempengaruhi ini.

Asli Saya pada dasarnya ingin menghapus padding default atau set margin untuk responsivitas pada layar perangkat yang lebih kecil.

Saya telah background colormengganti container-fluidpemilih dan untuk layar yang lebih besar mereka merender dengan sempurna 100% melintasi lebar tetapi layarnya dikurangi menjadi ukuran yang lebih kecil, secara default, Bootstrap tampaknya menambahkan margin atau padding pada container-fluidataucontainer .

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

Jika saya menggunakan css khusus untuk menimpa gaya default Bootstrap, kueri atau pemilih media apa yang harus saya timpa untuk menghapus padding ini di layar yang lebih kecil?

Kueri @media khusus untuk 'ponsel' adalah ..

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

Namun, Anda mungkin ingin menghapus padding / margin untuk ukuran layar yang lebih kecil. Secara default, Bootstrap menyesuaikan margin / padding ke body, container, dan navbar pada 978px.

Berikut beberapa pertanyaan yang berhasil (dalam banyak kasus) untuk saya:

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

Demo

Pembaruan untuk Bootstrap 4

Gunakan utilitas spasi responsif baru yang memungkinkan Anda menyetel pengisi / margin untuk lebar layar yang berbeda (titik putus): https://stackoverflow.com/a/43208888/171456

Masalahnya di sini jauh lebih kompleks daripada melepas bantalan wadah karena struktur kisi bergantung pada bantalan ini saat menerapkan margin negatif untuk baris tertutup.

Menghapus padding kontainer dalam hal ini akan menyebabkan luapan sumbu x yang disebabkan oleh semua baris di dalam kelas kontainer ini, ini adalah salah satu hal paling bodoh tentang Bootstrap Grid.

Logikanya itu harus didekati

1. Jangan pernah menggunakan .container kelas untuk hal lain selain baris
2. Buat klon .containerkelas yang tidak memiliki padding untuk digunakan dengan html non-grid
3. Untuk menghapus .containerpadding di ponsel, Anda dapat menghapusnya secara manual dengan kueri media overflow-x: hidden;yang tidak terlalu dapat diandalkan tetapi berfungsi di banyak kasus.

Jika Anda menggunakan LESShasil akhirnya akan terlihat seperti ini

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

Ubah kueri media ke ukuran apa pun yang ingin Anda targetkan.

Pikiran terakhir, saya akan sangat merekomendasikan menggunakan Foundation FrameworkGrid karena caranya lebih maju

Utas ini sangat membantu dalam menemukan solusi dalam kasus khusus saya (bootstrap 3)

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

Untuk mengatasi masalah seperti ini saya menggunakan CSS - cara tercepat & termudah menurut saya ... Cukup modifikasi sesuai kebutuhan Anda ...

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

Cara saya mendapatkan elemen agar 100% lebar perangkat adalah menggunakan margin kiri dan kanan negatif di atasnya. Badan memiliki bantalan 24 piksel, jadi itulah yang dapat Anda gunakan untuk margin negatif:

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

Di Bootstrap 4, margin 15px yang dimiliki container awal, menurun ke semua baris dan kolom. Jadi, sesuatu seperti ini berhasil untuk saya ...

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

Saya mengalami masalah ini terjadi di situs yang menggunakan pemformatan dan kode yang serupa dan saya telah memeras otak saya atas detail yang hilang yang membuat beberapa situs saya berfungsi, dan beberapa tidak.

Untuk Bootstrap 3: Jawabannya bagi saya bukanlah menulis ulang css untuk .container-fluid, .row atau reset margin, pola konsisten yang saya sadari adalah panjang kata-kata yang lebih panjang membuang desain dan membuat margin .

Langkah solusinya:

1. Uji halaman Anda dengan menghapus sementara bagian yang berisi penampung dan menguji situs Anda di browser kecil. Ini akan mengidentifikasi wadah masalah Anda.

2. Anda mungkin mengalami masalah format div. Jika Anda melakukannya, perbaiki. Jika semuanya baik-baik saja:

3. Identifikasi apakah Anda telah menggunakan kata-kata panjang yang tidak membungkus. Jika Anda tidak dapat mengubah kata (seperti untuk baris tag atau slogan, dll.)

Solusi 1: Format font ke ukuran yang lebih kecil di kueri media Anda untuk layar yang lebih kecil (saya biasanya menemukan @media (max-width: 767px) sudah cukup).

ATAU:

Solusi 2:

@media (max-width: 767px){

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

CSS oleh Paulius Marčiukaitis bekerja dengan baik untuk tema Genesis saya, inilah cara saya memodifikasinya lebih lanjut untuk kebutuhan saya:

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

}

Solusi mudahnya adalah menulis sesuatu seperti itu,

px-lg-1

mb-lg-5

Dengan menambahkan lg, kelas hanya akan diterapkan di layar besar

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

Inilah yang saya lakukan untuk Bootstrap 3/4

Gunakan wadah-cairan sebagai pengganti wadah.

Tambahkan ini ke CSS saya

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

Ini menghapus margin di bawah layar lebar 1400px

Css lain yang dapat membuat masalah margin adalah yang Anda miliki direction:someValuedi css Anda, jadi hapus saja dengan mengaturnya ke inisial.

Sebagai contoh:

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