Bootstrap 3'teki sütunlardan dolguyu kaldırma

342

Sorun:

Bootstrap 3'te col-md- * 'nin sağındaki ve solundaki dolgu / kenar boşluğunu kaldırın.

HTML Kodu:

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

Istenilen çıktı:

Şu anda bu kod, iki sütunun sağına ve soluna dolgu / kenar boşluğu ekler. Yanlardaki bu ekstra alanı kaldırmak için neyin eksik olduğunu merak ediyorum?

Farkına varmak:

"Col-md-4" i kaldırırsam, her iki sütun da% 100'e genişler, ancak yan yana olmalarını isterim.

css  twitter-bootstrap  html 
— kexxcream
kaynak
1
4 Kullanım Bootstrap için pl-0 pr-0yani<div class="col-7 pl-0 pr-0">
— Muhammad Shahzad
Daha kısa, px-0hem sol hem de sağ içerir.
— Théophile

Yanıtlar:

454

Normalde .rowiki sütunu sarmak için kullanırsınız , değil .col-md-12- bu başka bir sütunu kapsayan bir sütundur. Afterall, a'nın getireceği .rowekstra kenar boşluklarına ve dolguya sahip değildir col-md-12ve ayrıca bir sütunun negatif sol ve sağ kenar boşluklarıyla sunacağı alanı da azaltır.

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

dolgu / kenar boşluklarını gerçekten kaldırmak istiyorsanız , her bir alt sütun için kenar boşluklarını / dolguları filtrelemek için bir sınıf ekleyin.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
— MackieeE
kaynak
Kap sınıfına .wit-padding olmadan eklemek bile gerekli mi? Sağladığınız CSS kodu ile .col-md-8 div dosyasına .nopadding eklemenin yeterli olduğunu söyleyebilirim.
— Charles Ingalls
59
Genellikle özel CSS'mde 3 ekstra sınıf oluştururum, .padding-0bu da sol ve sağ doldurmayı (yalnızca) 0'a ayarlar; .padding-smdolguyu 2px'e ve dolguyu 5px'e .padding-mdayarlar. Normal dolgu 15 pikseldir (özelleştirilmedikçe), bu nedenle bu ekstra sınıflar yeterlidir.
— MichaelJTaylor
Bu arada .row yeni çizgiyi taşıdı
— ozanmuyes
6
Her zamanki dolgu değişkenlerde özelleştirilmiştir .less @ grid-gutter-width: 30px;
— Vladislav Lezhnev
6
dolgu veya sınıf oluşturmak için önceden tanımlanmış herhangi bir önyükleme var sadece çözüm
— Gaurav Aggarwal
186

Bootstrap 4 .no-gutterssınıfı ekledi .

Bootstrap 3 : Her zaman Bootstrap'ım LESS / SASS'a bu stili ekliyorum:

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

Daha sonra HTML'de şunları yazabilirsiniz:

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

Yalnızca alt sütunları hedeflemek istiyorsanız alt seçiciyi kullanabilirsiniz (Teşekkürler John Wu).

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

Dolguyu yalnızca belirli cihaz boyutları için de kaldırmak isteyebilirsiniz (SASS örneği):

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

Küçük aygıtları yukarı doğru desteklemesini istiyorsanız, ortam sorgusunun maksimum genişlik kısmını kaldırabilirsiniz.

— martinedwards
kaynak
10
Bu, yuvalama dışında düz CSS'dir (aynı zamanda SASS'tadır), bu yüzden aynı şekilde çalışmalıdır.
— martinedwards
4
Performansı artırmak için doğrudan çocuk seçiciyi kullanmanızı öneririm. & >[class*="col-"]Bunun yerine kullanın .
— John Wu
3
@JohnWu, iç içe satırların stili devralmasını da önler ve bu da bana biraz sorun çıkarır. Teşekkürler!
— Troy Carlson
2
Bunun [class^="col-"], [class*=" col-"] {...}yerine gerçekten kullanmalısınız, böylece foocol-örneğin adlı sınıfları yanlışlıkla hedeflemezsiniz . Bu, başlangıçta bu sınıf adına sahip olan veya dizenin başka bir sınıf adının parçası olarak bulunduğu yeri hedeflemeden ikincil sınıf olarak bulunan öğeleri hedefler .
— Brett
1
Kutsal dumanlar! İPhone 6'ım bazen web sayfamda (ama tutarsız bir şekilde) otozom içeri gireceğinden bir iOS görüntüleme hatası olduğunu düşündüğümle mücadele etmek için saatler harcadım. Col dolgusu çıkardıktan sonra, otozomun düzgün çalıştığını düşünüyorum! Teşekkürler!
— Ryan
45

Yalnızca sütunlardaki dolguyu azaltmak, hile yapmaz, çünkü sayfanın genişliğini uzatacağınız, sayfanızın geri kalanıyla dengesiz hale getirdiğinizi varsayalım. Satırdaki negatif marjı eşit olarak azaltmanız gerekir. @Martinedwards'ın DAHA AZ örneği:

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
— phoeb
kaynak
Bu, yalnızca satırınız bir kapta veya başka bir sütunda olmadığında bir sorundur. Negatif marjlar dolguyu bu unsurlardan
— Fred Stark
!importantBu işi yapmak için her iki kenar boşluğuna da ihtiyacım vardı
— Philip Bijker
22

Özellikle SASS karışımı için:

@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");

Ardından HTML'de şunları kullanabilirsiniz: 

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

Elbette, @ sadece ihtiyacınız olan bildirimleri dahil edebilirsiniz.

— Vitaliy Silin
kaynak
Bu durumda (bunun için teşekkürler) bu mixin kullanmaya çalışıyorum ve dolgu çalışmıyor. .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 18:15
Neyin yanlış olduğunu anladım. Bu çözüm çalışmaları için başka bir karışım oluşturmam gerekiyor. Btw, SASS mixin için teşekkürler :)
— jpcmf80 18:15
Ben sadece bu @mixin nopadding{ padding:0!important; }benim oluşturmak _mixin.scss ve daha sonra @include nopadding;yukarıdaki koda ekleyin . :)
— jpcmf80
18

Bundan böyle yalnızca Bootstrap4'te

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

not: .p-0 ve .m-0 zaten bootstrap.css ekledi

— Ali Göksel Bektaş
kaynak
12

Bootstrap 4 , bunu yapmak için yerel bir sınıfa sahiptir: sınıfı .no-guttersüst öğeye ekleme.row

— Guillaume Gautier
kaynak
10

Yalnızca LESS kaynaklarından bootstrap derlerseniz mümkün olan başka bir çözüm, sütunlar için dolgu ayarlayan değişkeni yeniden tanımlamaktır.

Değişkeni variables.lessdosyada bulacaksınız : çağrılır @grid-gutter-width.

Kaynaklarda şöyle anlatılır:

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

Bunu 0 olarak ayarlayın, derleyin bootstrap.lessve sonucu ekleyin bootstrap.css. Bitirdiniz. Benim gibi önyükleme kaynakları kullanıyorsanız, ek bir kural tanımlamanın bir alternatifi olabilir.

— bağlantı
kaynak
6

Bootstrap 3, 3.4.0 sürümünden beri , dolguları kaldırmak için resmi bir yol var: sınıf row-no-gutters.

Belgelerden örnek :

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

Yukarıdaki çözümlerin hiçbiri benim için mükemmel sonuç vermedi. Bu cevabın ardından benim için işe yarayan bir şey yaratabildim. Burada da bunu yalnızca küçük ekranlarla sınırlamak için medya sorgusu kullanıyorum.

@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
kaynak
3

Önyükleme 3.7.7 veya daha azını kullanarak s / b sütunlarındaki boşluğu kaldırın.

.no-gutter, satır DIV'lerinize ekleyebileceğiniz özel bir sınıftır

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
— Süper model
kaynak
Bu çalıştı ve daha az ya da SASS gerektirmedi. Ben de bu ekstra stil uygulamak olarak, ancak, benim satıra kapsayıcı sınıfı eklemek zorunda fark ettiniz: margin:0 auto;.
— Volomike
Geliştiricilerin bununla bir kez yapıldığında, sütunun içinde bir DIV oluşturmaları ve kendi oluk boyutlarını oluşturmak için buna bir marj uygulaması gerektiğini anlamaları gerekecek.
— 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>

Col-md-4 içindeki div öğesine bir satır sınıfı ekleyebilirsiniz ve satırın -15px kenar boşluğu sütunlardaki oluğu dengeler. İyi açıklama burada Bootstrap 3'te olukları ve satırlar hakkında.

— 1Bladesforhire
kaynak
2

Sanırım sadece kullanmak daha kolay 

margin:-30px;

bootstrap tarafından ayarlanan orijinal değeri geçersiz kılmak için.

denedim 

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

ve benim için çalıştı.

— Basheer
kaynak
1

Sütunlarınızı bir .row içine sarın ve bu div'e "no-gutter" adlı bir sınıf ekleyin

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

Ardından aşağıdaki içeriği CSS dosyanıza yapıştırın

.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;
}
— Ki
kaynak
1

Bootstrap Gutter'ı css referansıyla kaldırın / özelleştirin: 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>
Snippet'i genişlet

— haryx8
kaynak
0

Kenar boşluğunu kaldırmak için yeni bir sınıf oluşturabilir ve ek kenar boşluğunu kaldırmak istediğiniz öğeye başvurabilirsiniz:

.margL0 { margin-left:0 !important }

! important : varsayılan kenar boşluğunu kaldırmanıza veya geçerli kenar boşluğu değerinin üzerine yazmanıza yardımcı olur

ve kenar boşluğunu sol taraftan kaldırmak istediğiniz div'e uygulayın

— Udit Bansal
kaynak
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
kaynak
Lütfen cevabınızla ilgili bir açıklama yapabilir misiniz?
— PKirby
bu kodları <head> etiketinden önce veya sonra sağlayın, böylece bu sayfadaki sınıf özelliklerini geçersiz kılar
— Sreelakshmi
0

Sütunlarınızın kenar boşluklarını ve dolgularını yönetmek için bootstrap kullanarak Daha Az Mixins oluşturabilirsiniz,

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

Kullanımı: 

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

Benzer şekilde, kenar boşluğu / dolgu sıfır değerini ayarlamak için,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— Mohan Dere
kaynak
Görünüşe göre bağlantılı bilgiler o sayfada bağlantılı sayfada. Bu SO'nun yolu değil. Cevabınıza gerekli bilgileri koyun!
— jogo
Ya da insanlar kabul edilen cevabı 159 upvotes ve downvotes ile kullanabilirler, bu iki yıldır burada. Ya da ondan fazla oy veren diğer birkaç cevaptan biri. Bu yarışmaya karşı bu sayfada yer kazanmak için daha fazla uğraşmanız gerekecek.
— Tom Zych
0

Üzerinde inşa Vitaliy Silin cevabı . Sadece dolgu istemediğimiz durumları değil, aynı zamanda standart ebatlı dolgularımız olan vakaları da kapsar.

Sassmeister.com'da bu kodun CSS'ye canlı dönüşümünü görün 

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

Bu daha sonra çıktı verir:

.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
kaynak
0

Bazen sütunlar için istediğiniz dolguyu kaybedebilirsiniz. Sonunda birbirlerine yapışıyorlar. Bunu önlemek için sınıfı aşağıdaki gibi güncelleyebilirsiniz:

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

ve ilgili sınıf:

.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
kaynak
0

SASS dosyalarıyla bootstrap indirirseniz, sütunların kenar boşluğu için bir ayarın bulunduğu yapılandırma dosyasını düzenleyebilir ve ardından kaydedebilirsiniz, böylece SASS sütunların yeni genişliğini hesaplar

— TheCrazyProfessor
kaynak
0

Bootstrap Grid sisteminizi özelleştirebilir ve özel duyarlı kılavuzunuzu tanımlayabilirsiniz.

Aşağıdaki cilt payı genişliği için varsayılan değerlerinizi olarak @grid-gutter-width = 30pxdeğiştirin@grid-gutter-width = 0px

(Oluk genişliği sütunlar arasında dolgudur. Sol ve sağ için ikiye bölünür.)

— Rafiqul İslam
kaynak
0

Hala her ekran boyutunda her dolgu üzerinde kontrol sahibi olmayı tercih ederim, bu yüzden bu css size yararlı olabilir :)

.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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.