Hapus padding dari kolom di Bootstrap 3

342

Masalah:

Hapus padding / margin di kanan dan kiri col-md- * di Bootstrap 3.

Kode HTML:

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

Output yang diinginkan:

Saat ini kode ini menambahkan padding / margin ke kanan dan kiri dari dua kolom. Saya bertanya-tanya apa yang saya lewatkan untuk menghilangkan ruang ekstra ini di samping?

Memperhatikan:

Jika saya menghapus "col-md-4" maka kedua kolom membesar hingga 100% tapi saya ingin keduanya bersebelahan.

css  twitter-bootstrap  html 
— kexxcream
sumber
1
Untuk penggunaan Bootstrap 4 pl-0 pr-0yaitu<div class="col-7 pl-0 pr-0">
— Muhammad Shahzad

Jawaban:

454

Anda biasanya menggunakan .rowuntuk membungkus dua kolom, bukan .col-md-12- itu adalah kolom yang membungkus kolom lain. Bagaimanapun, .rowtidak memiliki margin dan bantalan ekstra yang col-md-12akan dibawa dan juga diskon ruang yang akan diperkenalkan kolom dengan margin kiri & kanan negatif.

<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

jika Anda benar - benar ingin menghapus padding / margin, tambahkan kelas untuk menyaring margin / paddings untuk setiap kolom anak.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
— MackieeE
sumber
Apakah menambahkan .tanpa padding ke kelas kontainer bahkan perlu? Saya akan mengatakan menambahkan .nopadding ke .col-md-8 div dengan kode CSS yang Anda berikan sudah cukup.
— Charles Ingalls
59
Saya biasanya membuat 3 kelas tambahan di custom CSS saya yaitu, .padding-0yang menetapkan padding kiri dan kanan (hanya) ke 0; .padding-smyang mengatur padding ke 2px dan .padding-mdyang mengatur padding ke 5px. Padding yang biasa adalah 15px (kecuali disesuaikan), sehingga kelas tambahan ini cukup.
— MichaelJTaylor
Omong- omong .row pindah itu baris baru
— ozanmuyes
6
Padding yang biasa dikustomisasi dalam variable.less @ grid-gutter-width: 30px;
— Vladislav Lezhnev
6
apakah ada bootstrap yang telah ditetapkan untuk menghapus padding atau membuat kelas hanya solusi
— Gaurav Aggarwal
186

Bootstrap 4 telah menambahkan .no-gutterskelas .

Bootstrap 3 : Saya selalu menambahkan gaya ini ke Bootstrap KURANG / SASS saya:

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

Kemudian dalam HTML Anda dapat menulis:

<div class="row row-no-padding">

Jika Anda hanya ingin menargetkan kolom anak Anda dapat menggunakan pemilih anak (Terima kasih John Wu).

.row-no-padding > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Anda mungkin juga ingin menghapus bantalan hanya untuk ukuran perangkat tertentu (contoh SASS):

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

Anda dapat menghapus bagian maksimum kueri media jika Anda ingin mendukung perangkat kecil ke atas.

— mati suri
sumber
10
Ini adalah CSS biasa selain dari nesting (yang juga ada di SASS), jadi harus bekerja sama.
— martinedwards
4
Saya sarankan menggunakan pemilih anak langsung untuk meningkatkan kinerja. Gunakan & >[class*="col-"]sebagai gantinya.
— John Wu
3
@ JohnWu yang juga mencegah baris bersarang mewarisi gaya, yang menyebabkan saya sedikit kesulitan. Terima kasih!
— Troy Carlson
2
Anda benar-benar harus menggunakan [class^="col-"], [class*=" col-"] {...}sehingga Anda tidak secara tidak sengaja menargetkan kelas yang diberi nama foocol-misalnya. Ini akan menargetkan elemen-elemen yang memiliki nama kelas di awal atau menjadikannya sebagai kelas sekunder juga tanpa menargetkan di mana string ditemukan sebagai bagian dari nama kelas lain.
— Brett
1
Kudus merokok! Saya hanya menghabiskan waktu berjam-jam berjuang dengan apa yang saya pikir adalah bug viewport iOS karena iPhone 6 saya kadang-kadang (tetapi tidak konsisten) autozoom masuk pada halaman web saya. Setelah menghapus col padding, saya pikir autozoom berfungsi dengan tepat! Terima kasih!
— Ryan
45

Mengurangi hanya bantalan pada kolom tidak akan membuat trik, karena Anda akan memperpanjang lebar halaman, membuatnya tidak rata dengan sisa halaman Anda, katakan navbar. Anda perlu mengurangi margin negatif pada barisan. Ambil contoh KURANG @martinedwards:

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
— phoeb
sumber
Ini hanya masalah ketika baris Anda tidak berada di wadah atau kolom lain. Margin negatif hanya mengimbangi bantalan dari elemen-elemen tersebut
— Fred Stark
Saya membutuhkan !importantkedua margin untuk membuat pekerjaan ini
— Philip Bijker
22

Khusus untuk mixin SASS:

@mixin no-padding($side) {
    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

Kemudian dalam HTML, Anda bisa menggunakan 

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

Tentu, Anda dapat menyertakan hanya deklarasi tersebut, yang Anda perlukan.

— Vitaliy Silin
sumber
Saya mencoba menggunakan mixin ini (terima kasih untuk itu) dalam situasi ini dan padding itu tidak berfungsi. .banners-home { @include make-row(); .banner-comprar,.banner-pq{ @include no-padding("all"); @include make-xs-column(6); @include make-sm-column(6); @include make-md-column(6); @include make-lg-column(6); } .banner-simulador{ @include no-padding("all"); @include make-xs-column(12); @include make-sm-column(12); @include make-md-column(12); @include make-lg-column(12); } }
— jpcmf80
Saya mencari tahu apa yang salah. Saya perlu membuat mixin lain agar solusi ini berfungsi. Btw, terima kasih atas mixin SASS :)
— jpcmf80
Saya baru saja membuat ini @mixin nopadding{ padding:0!important; }di saya _mixin.scss dan kemudian tambahkan @include nopadding;ke kode di atas. :)
— jpcmf80
18

Selanjutnya hanya tersedia di Bootstrap4

<div class="p-0 m-0">
</div>

catatan: .p-0 dan .m-0 sudah menambahkan bootstrap.css

— Ali Göksel Bektaş
sumber
12

Bootstrap 4 memiliki kelas asli untuk melakukan ini: tambahkan kelas .no-gutterske induk.row

— Guillaume Gautier
sumber
10

Solusi lain, layak hanya jika Anda mengkompilasi bootstrap dari sumber KURANG nya, adalah mendefinisikan kembali variabel yang menetapkan padding untuk kolom.

Anda akan menemukan variabel dalam variables.lessfile: itu disebut @grid-gutter-width.

Dijelaskan seperti ini di sumber:

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

Setel ini menjadi 0, kompilasi bootstrap.less, dan sertakan hasilnya bootstrap.css. Kamu selesai. Ini bisa menjadi alternatif untuk mendefinisikan aturan tambahan, jika Anda sudah menggunakan sumber bootstrap seperti saya.

— tautan
sumber
6

Bootstrap 3, sejak versi 3.4.0 , memiliki cara resmi untuk menghapus lapisan: kelas row-no-gutters.

Contoh dari dokumentasi :

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
— Smi
sumber
3

Tidak ada solusi di atas yang berfungsi dengan baik untuk saya. Mengikuti jawaban ini, saya dapat membuat sesuatu yang bekerja untuk saya. Di sini saya juga menggunakan kueri media untuk membatasi ini hanya untuk layar kecil.

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}
— rlv-dan
sumber
3

Hapus spasi dari kolom b / w menggunakan bootstrap 3.7.7 atau kurang.

.no-gutter adalah kelas khusus yang dapat Anda tambahkan ke DIV baris Anda

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
— Super Model
sumber
Ini berhasil dan tidak memerlukan KURANG atau SASS. Aku melihat bahwa aku harus menambahkan kelas kontainer ke baris saya, bagaimanapun, serta menerapkan styling ekstra ini: margin:0 auto;.
— Volomike
Devs perlu menyadari dengan ini bahwa setelah ini dilakukan, mereka perlu membuat DIV di dalam kolom dan menerapkan margin untuk itu untuk membuat ukuran selokan mereka sendiri.
— Volomike
2 
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>

<div class="col-md-4">
    <div class="widget row">
        <div class="widget-header">
            <h3>Dimensions</h3>
        </div>

        <div class="widget-content" id="">
            <div id='jqxWidget'>
                <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                <div style="clear:both;" id="listBoxB"></div>

            </div>
        </div>
    </div>
</div>

<div class="col-md-8">
    <div class="widget row">
        <div class="widget-header">
            <h3>Results</h3>
        </div>

        <div class="widget-content">
            <div id="map_canvas" style="height: 362px;"></div>
        </div>
    </div>
</div>

Anda dapat menambahkan kelas baris ke div di dalam col-md-4 dan margin -15px baris akan menyeimbangkan selokan dari kolom. Penjelasan yang baik di sini tentang selokan dan baris di Bootstrap 3.

— 1 Bladesforhire
sumber
2

Saya kira lebih mudah digunakan 

margin:-30px;

untuk mengesampingkan nilai asli yang ditetapkan oleh bootstrap.

Saya sudah mencoba 

margin: 0px -30px 0px -30px;

dan itu berhasil untuk saya.

— Basheer
sumber
1

Bungkus kolom Anda dalam .row dan tambahkan ke div itu kelas yang disebut "tanpa selokan"

<div class="container">
  <div class="row no-gutter">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>
</div>

Kemudian rekatkan konten di bawah ini ke file CSS Anda

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}
— Chi
sumber
1

Hapus / sesuaikan Bootstrap Talang dengan referensi css: http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

/* remove */
.gutter-0.row {
  margin-right: -0px;
  margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

/* customize */
.gutter-6.row {
  margin-right: -3px;
  margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
  padding-right: 3px;
  padding-left: 3px;
}
    
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>
Luaskan cuplikan

— haryx8
sumber
0

Anda bisa membuat kelas baru untuk menghapus margin dan bisa menerapkan ke elemen tempat Anda ingin menghapus margin tambahan:

.margL0 { margin-left:0 !important }

! Penting : ini akan membantu Anda menghapus margin default atau menimpa nilai margin saat ini

dan terapkan ke div itu dari mana Anda ingin menghapus margin dari sisi kiri

— Udit Bansal
sumber
0 
<style>
.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>
— Sreelakshmi
sumber
Bisakah Anda memberikan penjelasan dengan jawaban Anda.
— PKirby
berikan kode-kode ini sebelum atau sesudah tag <head> sehingga ini akan menimpa properti kelas tersebut di halaman itu
— Sreelakshmi
0

Anda dapat membuat Less Mixins menggunakan bootstrap untuk mengelola margin dan bantalan kolom Anda seperti,

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

Pemakaian: 

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

Demikian pula untuk pengaturan margin / padding nol yang dapat Anda gunakan,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— Mohan Dere
sumber
Tampaknya informasi penting ada di halaman yang ditautkan. Ini bukan cara SO. Masukkan informasi penting dalam jawaban Anda!
— jogo
Atau orang bisa menggunakan jawaban yang diterima dengan 159 upvotes dan tanpa downvotes, yang sudah ada di sini selama dua tahun. Atau salah satu dari beberapa jawaban lain dengan lebih dari sepuluh upvotes. Anda harus berusaha lebih keras untuk mendapatkan tempat di halaman ini melawan pesaing itu.
— Tom Zych
0

Membangun jawaban Vitaliy Silin . Meliputi tidak hanya kasus di mana kami tidak ingin bantalan sama sekali, tetapi juga kasus di mana kami memiliki bantalan ukuran standar.

Lihat konversi langsung dari kode ini ke CSS di sassmeister.com 

@mixin padding($side, $size) {
    $padding-size : 0;
    @if $size == 'xs' { $padding-size : 5px; }
    @else if $size == 's' { $padding-size : 10px; }
    @else if $size == 'm' { $padding-size : 15px; }
    @else if $size == 'l' { $padding-size : 20px; }

    @if $side == 'all' {
        .padding--#{$size} {
            padding: $padding-size !important;
        }
    } @else {
        .padding-#{$side}--#{$size} {
            padding-#{$side}: $padding-size !important;
        }
    }
}

$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
  @each $current-size in $sizes-list {
    @include padding($current-side,$current-size);
  }
}

Ini kemudian menghasilkan:

.padding--none {
  padding: 0 !important;
}

.padding--xs {
  padding: 5px !important;
}

.padding--s {
  padding: 10px !important;
}

.padding--m {
  padding: 15px !important;
}

.padding--l {
  padding: 20px !important;
}

.padding-top--none {
  padding-top: 0 !important;
}

.padding-top--xs {
  padding-top: 5px !important;
}

.padding-top--s {
  padding-top: 10px !important;
}

.padding-top--m {
  padding-top: 15px !important;
}

.padding-top--l {
  padding-top: 20px !important;
}

.padding-right--none {
  padding-right: 0 !important;
}

.padding-right--xs {
  padding-right: 5px !important;
}

.padding-right--s {
  padding-right: 10px !important;
}

.padding-right--m {
  padding-right: 15px !important;
}

.padding-right--l {
  padding-right: 20px !important;
}

.padding-bottom--none {
  padding-bottom: 0 !important;
}

.padding-bottom--xs {
  padding-bottom: 5px !important;
}

.padding-bottom--s {
  padding-bottom: 10px !important;
}

.padding-bottom--m {
  padding-bottom: 15px !important;
}

.padding-bottom--l {
  padding-bottom: 20px !important;
}

.padding-left--none {
  padding-left: 0 !important;
}

.padding-left--xs {
  padding-left: 5px !important;
}

.padding-left--s {
  padding-left: 10px !important;
}

.padding-left--m {
  padding-left: 15px !important;
}

.padding-left--l {
  padding-left: 20px !important;
}
— Adrien Be
sumber
0

Kadang-kadang Anda mungkin kehilangan bantalan yang Anda inginkan untuk kolom. Mereka akhirnya saling menempel. Untuk mencegahnya, Anda dapat memperbarui kelas sebagai berikut:

<div class="col-md-3 NoPaddingForChildren">
        <div class="col-md-6">
                    <label>Id</label>
                    <input ng-model="ID" class="form-control">
        </div>
        <div class="col-md-6">
                    <label>Value</label>
                    <input ng-model="Val" class="form-control">
        </div>
</div>

dan kelas yang sesuai:

.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
    padding-left: 0;
    padding-right: 0;
}

.NoPaddingForChildren > div:first-child {
    padding-left: 0;
}

.NoPaddingForChildren > div:last-child {    
    padding-right: 0;
}
— Mahesh
sumber
0

Jika Anda mengunduh bootstrap dengan file SASS Anda akan dapat mengedit file konfigurasi di mana ada pengaturan untuk margin kolom dan kemudian menyimpannya, dengan cara itu SASS menghitung lebar baru kolom

— TheCrazyProfessor
sumber
0

Anda dapat menyesuaikan sistem Bootstrap Grid Anda dan menentukan grid responsif khusus Anda.

ubah nilai default Anda untuk lebar selokan berikut dari @grid-gutter-width = 30pxmenjadi@grid-gutter-width = 0px

(Lebar selokan adalah padding antara kolom. Itu dibagi menjadi dua untuk kiri dan kanan.)

— Rafiqul Islam
sumber
0

Saya masih lebih suka untuk memiliki kontrol atas setiap bantalan di setiap ukuran layar sehingga css ini mungkin berguna untuk kalian :)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}
— Eryk Wróbel
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.