wake-up-neo.com

Bootstrap 3-Gitter ohne Lücke

Ich versuche, ein 2-Säulen-Raster zu erstellen, das buchstäblich 50% ohne Ränder oder Polsterung ist. 

Wie erreiche ich das mit Bootstrap 3? Ich habe es versucht, aber an den Haltepunkten von Tablet/Desktop habe ich negative Ränder:

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6 offset-0">Col 1</div>
        <div class="col-sm-6 offset-0">Col 2</div>
    </div>
</diV>

CSS

.container {
    background: green;
    overflow: hidden;
}
.row > * {
    background: blue;
    color: #fff;
}
.row :first-child {
    background: red;
}
.offset-0 {
    padding-left: 0;
    padding-right: 0;
}

DEMO - http://jsfiddle.net/pjBzY/

36
John Magnolia

Das Gittersystem in Bootstrap 3 erfordert eine etwas seitliche Verschiebung in Ihrem Denken von Bootstrap 2. Eine Spalte in BS2 (col-*) ist NICHT gleichbedeutend mit einer Spalte in BS3 (col-sm-* usw.), aber es gibt eine Möglichkeit, dies zu erreichen Ergebnis.

Überprüfen Sie dieses Update auf Ihrer Geige: http://jsfiddle.net/pjBzY/22/ (Code kopiert unten).

Zunächst müssen Sie nicht für jede Bildschirmgröße eine Spalte angeben, wenn Sie 50/50 Spalten in allen Größen wünschen. col-sm-6 gilt nicht nur für kleine Bildschirme, sondern auch für mittelgroße und große Bildschirme. Dies bedeutet, dass class="col-sm-6 col-md-6" überflüssig ist (wenn Sie die Spaltenbreiten bei Bildschirmen mit unterschiedlichen Größen ändern möchten, z. B. col-sm-6 col-md-8).

Was die Margen betrifft, bieten die negativen Margen eine Möglichkeit, Textblöcke flexibler auszurichten als dies in BS2 möglich war. Sie werden in jsfiddle feststellen, dass der Text in der ersten Spalte visuell mit dem Text im Absatz außerhalb der row ausgerichtet ist - außer bei "xs" -Fenstergrößen, bei denen die Spalten nicht angewendet werden.

Wenn Sie ein Verhalten benötigen, das näher an dem ist, das Sie in BS2 hatten, wo zwischen den einzelnen Spalten eine Auffüllung vorhanden ist und keine visuellen negativen Ränder vorhanden sind, müssen Sie jeder Spalte ein inner-div hinzufügen. Siehe den inner-content in meinem jsfiddle. Fügen Sie in jede Spalte etwas davon ein, und sie verhalten sich wie die alten col-*-Elemente in BS2.


jsfiddle HTML

<div class="container">
    <p class="other-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam sed sem nec viverra. Phasellus fringilla metus vitae libero posuere mattis. Integer sit amet tincidunt felis. Maecenas et pharetra leo. Etiam venenatis purus et nibh laoreet blandit.</p>
    <div class="row">
        <div class="col-sm-6 my-column">
            Col 1
            <p class="inner-content">Inner content - THIS element is more synonymous with a Bootstrap 2 col-*.</p>
        </div>
        <div class="col-sm-6 my-column">
            Col 2
        </div>
    </div>
</div>

und das CSS

.row {
    border: blue 1px solid;
}
.my-column {
    background-color: green;
    padding-top: 10px;
    padding-bottom: 10px;
}
.my-column:first-child {
    background-color: red;
}

.inner-content {
    background: #eee;
    border: #999;
    border-radius: 5px;
    padding: 15px;
}
5
keithjgrant

Eine andere Option wäre, Ihre eigene spezielle CSS-Klasse zu erstellen, wann immer Sie die "rinnenlosen" Spalten anwenden möchten.

HTML

<div class="container">
    <div class="row no-Gutter">
        <div class="col-6 col-sm-6 col-lg-6">Col 1</div>
        <div class="col-6 col-sm-6 col-lg-6">Col 2</div>
    </div>
</div>

CSS 

.no-Gutter [class*="-6"] {
    padding-left:0;
}

Demo: http://bootply.com/73960

58
Zim

Ich füge meinem Bootstrap LESS/SASS immer diesen Stil hinzu:

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

Dann können Sie in das HTML schreiben:

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

Sie müssen die negativen Ränder von .row in großen Bildschirmen entweder direkt oder mit einer benutzerdefinierten Klasse überschreiben

@media (min-width: 768px){
    .row {
        margin-right: 0;
        margin-left: 0;
    }
}

Aktualisierte Geige

8
koala_dev

Ich bin mir sicher, dass es einen Weg geben muss, ohne mein eigenes CSS zu schreiben.

.row-offset-0 {
    margin-left: 0;
    margin-right: 0;
}
.row-offset-0 > * {
    padding-left: 0;
    padding-right: 0;
}

http://jsfiddle.net/KxCkD/

5
John Magnolia

Sie können auf Martinedwards und andere Ideen verallgemeinern. Sie können eine Reihe von Säulen zusammenkleben (nicht nur ein Paar), indem Sie die Polsterung von geraden und ungeraden Spaltenkindern anpassen. Fügen Sie diese Definition einer Klasse .no-Gutter hinzu und platzieren Sie sie in Ihrem .row-Element

.row.no-Gutter > [class*='col-']:nth-child(2n+1) {
    padding-right: 0;
 } 

.row.no-Gutter > [class*='col-']:nth-child(2n) {
    padding-left: 0;
}

Oder in SCSS:

.no-Gutter  {
    > [class*='col-'] {
        &:nth-child(2n+1) {
            padding-right: 0;
        }
        &:nth-child(2n) {
            padding-left: 0;
        }
    }
}
4
yuvilio

Die Antwort von @yuvilio funktioniert gut für zwei Spalten, aber für mehr als zwei, dies aus hier könnte eine bessere Lösung sein. In Summe:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
3
starfry

Verwenden Sie "clearfix" anstelle von "row". Es tut genau das gleiche, außer es hat keine negative Marge. Gehen Sie die Verwendung der "Reihe" durch und Sie werden feststellen, dass dies der einzige Unterschied ist.

1
Kyle

Einfach können Sie die folgende Klasse verwenden.

.nopadmar {
   padding: 0 !important;
   margin: 0 !important;
}
<div class="container-fluid">
  <div class="row">
	   <div class="col-md-6 nopadmar">Your Content<div>
       <div class="col-md-6 nopadmar">Your Content<div>
  </div>
</div>

0

Das leistungsstärkere (und zu 100% flüssigere) Bootstrap 3-Gitter gibt es jetzt in 3 Größen. Klein (für Smartphones .col -), Klein (für Tablets .col-sm-) und Groß (für Laptops/Desktops .col-lg- *). Mit den drei Rastergrößen können Sie das Rasterverhalten auf verschiedenen Geräten (Desktop, Tablet, Smartphone usw.) steuern. 

Im Gegensatz zu 2.x bietet Bootstrap 3 kein festes (pixelbasiertes) Gitter. Während ein Layout mit fester Breite immer noch mit einem einfachen benutzerdefinierten Wrapper erzielt werden kann, gibt es jetzt nur noch ein prozentuales (flüssiges) Gitter. Die .container- und .row-Klassen sind jetzt standardmäßig flüssig, verwenden Sie also nicht mehr .row-fluid oder .container-fluid in Ihrer 3.x-Markierung.

Quelle

0
xzegga
.row.row-no-padding {
    margin-left: 0 !important;
    margin-right: 0 !important;

    & > [class^="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
0
damlys