Frage Bootstrap 3 Gosse Größe


Ich habe gerade erst angefangen mit dem Bootstrap zu arbeiten und bin unsicher, wie ich mein Ziel erreichen kann.

Ich möchte, dass die Dachrinnen gleichmäßig sind, wie sie in diesem Bild sind:

enter image description here

Standardmäßig sehen sie so aus, die vertikalen Rinnen zwischen den Spalten (blau markiert) sind doppelt so groß wie die horizontalen und äußeren Rinnen:

enter image description here

Jede Hilfe auf dem besten Weg, um dies wahrscheinlich zu lösen, würde geschätzt werden.


23
2017-09-27 02:23


Ursprung


Antworten:


Versuchen:

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

Jede Spalte hat auf beiden Seiten eine Polsterung von 15 px. Das macht eine Gosse zwischen 30 px. Im Fall des Sm-Grids wird Ihre Container-Klasse 970px (((940px + @ grid-rinnen-width))). Jede Spalte erhält eine Breite von 940/12. Die resultierende @ grid-rinnenbreite / 2 auf beiden Seiten des Raster wird mit einem negativen Rand von - 15px; Wenn Sie diesen negativen linken Rand rückgängig machen, legen Sie eine Rinne von 30 px auf beiden Seiten des Rasters fest. Diese Rinne wird mit 15px Polsterung der Spalte + 15 px ruhendem Gitterraum gebaut.

aktualisieren 

Als Antwort auf die Antwort von @ElwoodP, beachte den folgenden Code:

<div class="container" style="background-color:darkblue;">  
<div class="row" style="background-color:yellow;">
  <div class="col-md-9" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-9</div>
    <div class="row" style="background-color:orange;">
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
    </div>
  </div>  
  <div class="col-md-3" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-3</div>
  </div>      
</div>
</div>

Im Falle einer Verschachtelung beeinflusst die .row-Klasse tatsächlich das Untergitter. Gut oder schlecht hängt von Ihren Erwartungen / Anforderungen für das Subgrid ab. Ändern der Marge der .row wird das Subgitter nicht brechen.

Standard:

enter image description here

Rand der .row Klasse

mit:

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

enter image description here

Polsterung der .container Klasse

mit:

.container {
    padding-left:30px;
    padding-right:30px;
}

enter image description here

Beachten Sie, dass Untergitter nicht innerhalb von a eingeschlossen werden sollten .container Klasse.


18
2017-09-27 06:45



Ich glaube nicht, dass Bass's Antwort richtig ist. Warum die Zeilenränder berühren? Sie haben einen negativen Rand, um die Spaltenauffüllung für die Spalten am Rand der Zeile zu kompensieren. Damit werden alle verschachtelten Zeilen durchbrochen.

Die Antwort ist einfach, machen Sie die Containerauffüllung gleich der Rinnengröße:

B. für den Standard-Bootstrap:

.container {
    padding-left:30px;
    padding-right:30px;
}

http://jsfiddle.net/3wBE3/61/


9
2018-03-11 14:50



Sie können das Standardverhalten (mit Gutter) beibehalten und Ihrem CSS-Stylesheet eine Klasse für Aufgaben wie Ihres hinzufügen:

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

Und so können Sie es in Ihrem HTML verwenden:

<div class="row no-gutter">
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
</div>

7
2018-05-04 10:04



Angesichts dieses Problems habe ich in meinem CSS-Stylesheet folgendes hinzugefügt:

#mainContent .container {
    padding-left:16px;
    padding-right:16px;
}
  #mainContent .row {
    margin-left: -8px;
    margin-right: -8px;
}

  #mainContent .col-xs-1, #mainContent .col-sm-1, #mainContent .col-md-1, #mainContent .col-lg-1, #mainContent .col-xs-2, #mainContent .col-sm-2, #mainContent .col-md-2, #mainContent .col-lg-2, #mainContent .col-xs-3, #mainContent .col-sm-3, #mainContent .col-md-3, #mainContent .col-lg-3, #mainContent .col-xs-4, #mainContent .col-sm-4, #mainContent .col-md-4, #mainContent .col-lg-4, #mainContent .col-xs-5, #mainContent .col-sm-5, #mainContent .col-md-5, #mainContent .col-lg-5, #mainContent .col-xs-6, #mainContent .col-sm-6, #mainContent .col-md-6, #mainContent .col-lg-6, #mainContent .col-xs-7, #mainContent .col-sm-7, #mainContent .col-md-7, #mainContent .col-lg-7, #mainContent .col-xs-8, #mainContent .col-sm-8, #mainContent .col-md-8, #mainContent .col-lg-8, #mainContent .col-xs-9, #mainContent .col-sm-9, #mainContent .col-md-9, #mainContent .col-lg-9, #mainContent .col-xs-10, #mainContent .col-sm-10, #mainContent .col-md-10, #mainContent .col-lg-10, #mainContent .col-xs-11, #mainContent .col-sm-11, #mainContent .col-md-11, #mainContent .col-lg-11, #mainContent .col-xs-12, #mainContent .col-sm-12, #mainContent .col-md-12, #mainContent .col-lg-12 
{
    padding-left: 8px;
    padding-right: 8px;
}

Dies überschreibt den Standard-Bootstrap-Stil und macht die linke und rechte Seite sowie die Rinne gleich breit.


2
2017-10-16 12:07



Fügen Sie diese Hilfsklassen zu stylesheet.less hinzu (Sie können verwenden http://less2css.org/ um sie nach CSS zu kompilieren)

.row.gutter-0 {
    margin-left: 0;
    margin-right: 0;
    [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

.row.gutter-10 {
    margin-left: -5px;
    margin-right: -5px;
    [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.row.gutter-20 {
    margin-left: -10px;
    margin-right: -10px;
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

Und so können Sie es in Ihrem HTML verwenden:

<div class="row gutter-0">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

<div class="row gutter-10">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

<div class="row gutter-20">
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">

    </div>
</div>

2
2017-12-25 16:26



Ich bin mit diesem Problem festgefahren, meine Lösung war eine Mischung, die es mir erlaubt, in SCSS die tatsächliche Rinnengröße anzugeben, die ich möchte ...

Lösung: 1) 

@mixin add-gutter($size) {
    margin-right: -$size;
    margin-left: -$size;

    > [class*="col-"] {
        padding-right: $size;
        padding-left: $size;
    }
}



.that-special-row{
    @include add-gutter(7px);
}

Und es zu benutzen ...

<div class="row that-special-row"></div>

Die eigentliche Lösung kam zustande dieses Problem Erwähnte ich auf Github, von dem ich glaube, dass es das gleiche Problem anspricht.

Lösung: 2) 

Eine andere Lösung wäre, einfach Ihr benutzerdefiniertes CSS zu erstellen Klasse

.small-gutters {
    margin-right: -10px;
    margin-left: -10px;
    > [class*="col-"] {
      padding-right: 10px;
      padding-left: 10px;
    }
  }

Ich hoffe, das hilft!


1
2017-10-24 16:11



@Bass Jobsen und @ElwoodP haben versucht, diese Frage umgekehrt zu beantworten - indem sie den äußeren Rändern die gleiche doppelte Größe wie den Rinnen geben. Der OP (und ich auch) war auf der Suche nach einem Weg, um eine Single Size Gutter an allen Orten zu haben. Hier sind die richtigen CSS-Anpassungen, um dies zu tun:

.row {
    margin-left: -7px;
    margin-right: -7px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-left: 7px;
    padding-right: 7px;
}
.container {
    padding-left: 14px;
    padding-right: 14px;
}

Dies hinterlässt a 14px Überlauf und Außenrand an allen Stellen.


0
2017-10-31 04:29



Wenn Sie sass in Ihrem eigenen Projekt verwenden, können Sie die Standard-Bootstrap-Rinnengröße überschreiben, indem Sie die sass-Variablen aus der Datei _variables.scss des Bootstraps in Ihre eigene sass-Projektdatei kopieren, z.

// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-gutter-width-base:     50px !default;
$grid-gutter-widths: (
        xs: $grid-gutter-width-base,
        sm: $grid-gutter-width-base,
        md: $grid-gutter-width-base,
        lg: $grid-gutter-width-base,
        xl: $grid-gutter-width-base
) !default;

Jetzt sind Ihre Dachrinnen 50px statt 30px. Ich finde dies die sauberste Methode, um die Rinnengröße anzupassen.


0
2017-11-29 10:10