İstenmeyen dolgu ekleyen ızgara ile önyükleme 3 ve 4.

İçeriğimin akıcı olmasını isterdim, ancak .container-fluidBootstrap'in ızgarasıyla kullanırken hala dolgu görüyorum.

Dolgudan nasıl kurtulabilirim?

Dolguyu anlamadığımı görüyorum .row, ancak sütunlar eklemek istiyorum ve bunu yapar yapmaz dolgu geri geliyor.

Sütunları tam genişlikte kullanabilmek istiyorum.

Bir örnek:

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

Çözümüm var:

Bootstrap.css'yi geçersiz kıl, linke 1427 ve 1428 (v3.2.0)

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

-e

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

Ayrıca her kapsayıcıya bu sorunu "çözecek" bir "satır" eklemelisiniz!

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

Bkz. Http://jsfiddle.net/3px20h6t/

Lütfen Bootstrap'ten gerçek css'yi bulun

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

Bir .container-fluidsınıf eklediğinizde, 15 piksellik bir yatay dolgu ekler ve .rowsatırda ayarlanan negatif kenar boşluğu ile bir sınıfı bir alt öğe olarak eklediğinizde aynı şey kaldırılır .

5 yıl geçti ve o kadar çok cevaplar vardır oldukça garip uymayan (ya karşı) önyükleme kuralları veya fiilen cevap vermene gerek yok ...

Kısa Cevap:
Dolguyu no-gutterskaldırmak için Bootstrap'in sınıfını kullanmanız yeterlidir :

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

(Ayrıca </div>dosyanızın sonuna eklemeyi unuttunuz . Yukarıdaki kodda da düzeltildi)

Not:

Kabın dolgusunu da kaldırmak istediğiniz durumlar vardır . Bu durumda , dokümantasyon tarafından tavsiye edildiği gibi bırakmayı .containerveya .container-fluidsınıfları düşünün .

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

Uzun cevap:

Aldığınız dolgular aslında Bootstrap belgelerinde belgelenmiştir :

Satırlar, sütunlar için sarmalayıcılardır. Her sütunda, aralarındaki boşluğu kontrol etmek için yatay dolgu (cilt payı adı verilir) bulunur. Bu dolgu daha sonra negatif kenar boşlukları olan satırlarda dengelenir. Bu şekilde, sütunlarınızdaki tüm içerik görsel olarak sol tarafa hizalanır.

Ve ayrıca belgelenen çözüm hakkında:

Sütunlarda, ayrı sütunlar arasında cilt payı oluşturmak için yatay dolgu vardır, ancak satırlardaki kenar boşluğunu ve .row üzerinde .no-olukları olan sütunlardaki dolguyu kaldırabilirsiniz.

Konteyneri düşürmeyle ilgili olarak:

Uçtan uca bir tasarıma mı ihtiyacınız var? Ana .container veya .container-liquid'i bırakın.

Bonus: Diğer cevaplarda bulunan hatalar hakkında

• Belgelerin dediği gibi , tüm içeriği col-s içine koyduğunuzdan ve bunları row-s ile sarmaladığınızdan emin olmak yerine bootstrap'in kapsayıcı sınıflarını hacklemekten kaçının :

Bir ızgara düzeninde, içerik sütunların içine yerleştirilmelidir ve yalnızca sütunlar satırların hemen çocukları olabilir.

• Hala hacklemeniz gerekiyorsa (birisinin zaten bir şeyleri karıştırması ve sorununuzu hızlı bir şekilde çözmeniz gerekirse), px-0bunun yerine yatay dolguyu kaldırmak pl-0 pr-0veya stillerinizi yeniden keşfetmek için Bootstrap kullanmayı düşünün .

Sanırım Tim ile aynı gereksinime sahiptim, ancak yanıtların hiçbiri 'normal iç oluklu görüntü alanı uçtan uca sütunlar' çözümü sağlamıyor. Ya da başka bir deyişle, ilk ve son sütunlarımın, sütunlar arasındaki normal olukları korurken, kap dolgusuna girip görüntü alanının kenarına akmasını nasıl sağlayabilirim?

Söyleyebileceğim kadarıyla düzgün ve temiz bir çözüm yok. Benim için işe yarayan şey bu, ancak Bootstrap tarafından desteklenebilecek her şeyin dışında. Ama şimdilik çalışıyor (Bootstrap 3.3.5 & 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

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

İşin püf noktası div, kapsayıcı dolgusuna itmek için fazladan -15 piksellik kenar boşluğu oluşturmak için satır ve sütunlar arasına bir iç içe yerleştirmektir . Ekstra negatif kenar boşluğu, küçük görünüm pencerelerinde yatay kaydırma (boşluğa doğru) oluşturur. Ekleme overflow-x: hiddeniçin .rowbunu bastırmak için gereklidir.

Bu aynı şekilde çalışır .container-fluidolarak .container.

Öyleyse işte Bootstrap 4'ün kısa özeti:

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

Benim için çalışıyor.

Sol ve sağ dolguyu 0 olarak işaretleyerek kap sıvısı tarafından eklenen dolguyu neden olumsuzlamayasınız ?

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

daha iyi bir yol? kap seviyesinde hiç dolgu yok (temizleyici)

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

Bu CSS özelliklerine yalnızca Bootstrap'in .container sınıfında ihtiyacınız vardır ve onun içine, konteynerin içeriği onun dışında kalmadan normal ızgara sistemini koyabilirsiniz (görünüm alanında kaydırma-x olmadan).

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

Yeni alfa sürümlerinde, yardımcı program aralık sınıfları tanıttılar . Onları akıllıca kullanırsanız yapı daha sonra ince ayar yapılabilir.

Hizmet sınıflarını aralıklandırma

<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-0ve pr-0sütunların başındaki ve sonundaki dolguyu kaldıracaktır. Geriye kalan bir sorun, hala negatif marjlara sahip oldukları için bir sütunun gömülü satırlarıdır. Bu durumda:

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

Sürüm farklılıkları

Ayrıca, yardımcı program aralık sınıflarının sürümden bu yana değiştiğini unutmayın 4.0.0-alpha.4. Onlar mesela => 2 tire ile ayrılmış edilmeden önce p-x-0ve p-l-0vb ...

Versiyon 3 için konuya devam etmek için: Bu, Bootstrap 3 projelerinde kullandığım şeydir ve bu belirli aralık yardımcı programı için pusula kurulumunu bootstrap-sass(sürüm 3) veya bootstrap(sürüm 4.0.0-alfa.3) içine çift tire veya bootstrap(sürüm 4.0.0-alpha.4 ve üstü) tek çizgilerle.

Ayrıca, en son sürüm (ler) pt-5yalnızca 3 yerine oranın 5 katına (örn: padding-top 5) kadar yükselir .

Pusula

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

CSS çıktısı

Elbette her zaman doldurma aralığı sınıflarını yalnızca oluşturulan bir css dosyasından kopyalayabilir / yapıştırabilirsiniz.

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

Bence kimse soruya doğru cevabı vermedi. Benim çalışma çözümüm şudur: 1. Sadece başka bir sınıfı konteyner-akışkan sınıfı örneği (.maxx) ile birlikte tanımlayın:

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

2. Sonra css bölümünde özgüllüğü kullanarak şunu yapın:

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

Bu% 100 çalışacak ve dolguyu soldan ve sağdan kaldıracaktır. Umarım bu yardımcı olur.

Eğer Yapılandırıcı ile çalışıyorsanız ayarlayabileceğiniz @grid-gutter-widthgelen 30pxetmek0

Kullandım <div class="container-fluid" style="padding: 0px !important"> ve çalışıyor gibi görünüyor.

Bununla kendim mücadele ettim ve sonunda bunu çözdüğüme inanıyorum. Bu soruda kaç tane başarısız cevap olduğu inanılmaz.

Yapmanız gereken tek şey, tüm .col öğelerinizden dolguyu ve .container-akışkanındaki dolguyu da çıkarmaktır.

Bunu kendi projemde css dosyama aşağıdakileri ekleyerek biraz dikkatsizce yaptım:

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

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

Kullandığım tüm farklı renk boyutlarını hesaba katmak için farklı renk boyutlarına sahibim. Css'i yazmanın daha temiz bir yolu olduğundan eminim ama bu nihai sonucu gösteriyor.

Kullanım px-0üzerinde containerve no-guttersüzerinde rowpadding kaldırın.

Bootstrap 4'ten alıntı yapmak - Izgara sistemi :

Satırlar, sütunlar için sarmalayıcılardır. Her sütunda, aralarındaki boşluğu kontrol etmek için yatay dolgu (cilt payı adı verilir) bulunur. Bu dolgu daha sonra negatif kenar boşlukları olan satırlarda dengelenir. Bu şekilde, sütunlarınızdaki tüm içerik görsel olarak sol tarafa hizalanır.

Sütunlar ancak, birlikte sütunlarından satırlardan marjı ve dolguyu kaldırmak, bireysel sütunlar arasındaki olukları oluşturmak için yatay dolgu var .no-guttersüzerinde .row.

Canlı bir demo aşağıdadır:

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>

Bunun işe yaramasının nedeni, container-fluidve colher ikisinin de aşağıdaki dolguya sahip olmasıdır:

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

px-0yatay dolgu kaldırabilir container-fluidve no-guttersdolguyu kaldırabilir col.