Entfernen der Dachrinne Raumes für einen bestimmten div nur

Den Standard-Bootstrap-grid-system verwendet 12 Spalten mit jeweils einer Spannweite mit 30px Dachrinne als unten. Dachrinnen sind die Leerzeichen zwischen den Spalten. Dachrinne Breite scheint zu sein, zwischen 20px - 30px. Nehmen wir an, es ist 30px hier.

Möchte ich entfernen Sie die Dachrinne Raum für eine bestimmte div, so dass es keine Dachrinne Platz in der Zeile. Jeder span wird neben einander, ohne Dachrinne.

Das problem ist, wenn ich entfernen Sie die Marge 30px (Dachrinne) verlässt 360px (12 * 30px) am Ende der Zeile.

Gegeben, dass ich Sie entfernen möchten Dachrinne Raum für eine bestimmte div nur. Lassen Sie uns davon ausgehen, dass es für divs, die in der main_content div.

div#main_content div{
  /*
 no gutter for the divs in main_content
 */
}

Wie Entferne ich die Rinne für eine bestimmte div ohne zu verlieren Bootstrap-Reaktionsfähigkeit und die nicht verlassen Raum am Ende der Zeile?

können Sie mir sagen, was ist falsch mit meiner ersten Lösung? siehe: bootply.com/61557
Bootstrap 3 wurde row-no-gutters in v3.4.0. Siehe getbootstrap.com/docs/3.4/css/#grid-remove-gutters. In dieser situation kann nur hinzufügen, dass die Klasse zu der betreffenden Zeile(N), die Sie nicht wollen, um eine Dachrinne. Siehe auch stackoverflow.com/questions/21254889/... (möglichst doppelte)

InformationsquelleAutor Techie | 2013-05-10

36

Für Bootstrap 3.0 oder höher, Lesen Sie diese Antwort

Sind wir nur betrachten, Klasse .span1 hier (eine Spalte auf einem 12 wide grid), aber Sie können erreichen, was Sie wollen, entfernen Sie den linken Rand von:
```
.row-fluid [class*="span"] { margin:0 } //line 571 of bootstrap responsive
```
Dann ändern .row-fluid .span1's Breite zu Höhe von 100% geteilt durch 12 Spalten (8.3333%).
```
.row-fluid .span1 { width: 8.33334% } //line 632 of bootstrap responsive
```
Möchten Sie vielleicht, dies zu tun, indem Sie eine zusätzliche Klasse, die erlauben würde, Sie zu verlassen, die Basis-grid-system intakt:
```
.row-fluid [class*="NoGutter"] { margin-left:0 }
.row-fluid .span1NoGutter { width: 8.33334% }

<div class="row-fluid show-grid">
    <div class="span1NoGutter">1</div>
</div>
```
Könnten Sie wiederholen Sie dieses Muster für alle anderen Spalten, sowie:
```
.row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } //100% /6 col
.row-fluid .span4NoGutter { width:25%; margin-left:0 } //100% /4 col
.row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } //100% /3 col
or
.row-fluid .span4NoGutter { width:25% }
.row-fluid [class*="NoGutter"] { margin-left:0 }
```
* EDIT (das beharren auf die Verwendung der Standard-grid)

Wenn Sie das Standard-grid-system eine Voraussetzung ist, ist es standardmäßig auf eine Breite von 940px (das .container und .span12 Klassen, das ist); also, in einfachen Worten, Sie wollen, um zu teilen 940 vom 12. Das entspricht 12 Container 78.33333 px breit.

Also Zeile 339 von bootstrap.css kann bearbeitet werden, etwa so:
```
.span1 { width:78.33333px; margin-left:0 }
  or
.span1 { width:8.33334%; margin-left:0 }
//this should render at 78.333396px (78.333396 x 12 = 940.000752)
```
- Schöne Lösung, die Frage ist über das Standard-grid, fügen Sie Flüssigkeit Zeilen in dieser Matrix. Ohne media queries unterhalb von 768px in Ihren Spalten nicht stacken.
- Dieses sieht wie es eine gute Wahl. Ich begann einen ähnlichen Ansatz und spielen mit ihm hier: bootply.com/61110 - Es sieht aus wie die Breite Prozentsätze müssen noch einige Optimierungen.
- warum bekam Sie span3 einer Breite von 24.99% statt 25%?
- Die breiten in @-skelly ist bootply sind ein wenig off, aber ich denke, der größte Grund, warum Sie Aussehen "off" ist, dass der text Linksbündig ausgerichtet. Hinzufügen von text-align:center reinigt, dass bis. Aber wie @Bass-Jobsen, sehe ich nicht den Vorteil im 24.99% vs 25%. Habe ein Mathe prob im Gymnasium, die bewiesen, dass .999999 == 1 eh (wünschte ich könnte mich erinnern die Gleichung).
- Bootstrap ist ein flüssiges raster. Ich war der Annahme, der OP war mit dem Teil und einfach nur versuchen zu beseitigen, die Dachrinnen.
- Wenn Sie erstellen eine benutzerdefinierte build mit gridGutterWidth=0 es gilt Satz span3 Breite "24.999999999999996". Also ich bin mir nicht sicher, warum es funktioniert, aber hier ist der neue "gutterless" Beispiel: bootply.com/61712
- Aus welchem Grund auch immer, der OP ist die Frage nach dem Standard-grid. Persönlich hätte ich angefangen mit dem responsive grid. Ich versuche, die Antwort auf das OP ist Q.
InformationsquelleAutor Dawson
141

Update 2018

Für Bootstrap 3, ist es viel einfacher. Bootstrap 3 verwendet nun Auffüllung anstelle von Rändern zu erstellen, die "Gosse".
```
.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;
}
```
Dann fügen Sie einfach no-gutter um alle Zeilen aus, in denen die Abstände entfernt werden:
```
  <div class="row no-gutter">
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
  </div>
```
Demo: http://bootply.com/107708

Bootstrap-4 (keine extra CSS erforderlich)

Bootstrap-4 enthält eine no-gutters Klasse, die angewendet werden können, um die gesamte row:

http://www.codeply.com/go/pVsGQZVVtG
```
<div class="row no-gutters">
    <div class="col">..</div>
    <div class="col">..</div>
    <div class="col">..</div>
</div>
```
Gibt es auch neue Abstand utils, dass die Steuerung der Polsterung/Ränder. Dies kann verwendet werden, ändern Sie die Polsterung (Dachrinne) für eine einzelne Spalte (sprich: <div class="col-3 pl-0"></div>) setzt padding-left:0; auf die Spalte, oder verwenden Sie px-0 entfernen Sie sowohl die linke und Rechte padding (x-Achse).
- Damit dies ordnungsgemäß funktioniert, sollten Sie auch hinzufügen .row.no-gutter { margin-left:0;margin-right:0; }
- Andere als die Beseitigung der Gosse, ich finde, dass eine Verringerung der macht Formen mehr lesbar. Ich habe eine Klasse für 5px und 10px. Eine gotcha ist, dass verschachtelte Zeilen müssen die gleiche Polsterung, oder Ihre Spalten nicht. Dies könnte wahrscheinlich werden behandelt in CSS wenn nötig.
- Tausend Dank dafür!!!! Ich hielt meinen Kopf kratzen, wie man loswerden, dass die Dachrinne Raum. Ich Schätze, ich sollte überprüft haben, den source-code, sondern CSS ist nicht meine Stärke. In jedem Fall sehr nützlich!
- eigentlich ist es .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) { margin-left: 0; margin-right: 0; }
- Wenn Sie möchten, Dachrinnen, um nur angewendet werden, um die direkten Nachkommen der Zeile, ich würde empfehlen, die änderung der zweiten Gruppe von Selektoren zu .row.no-gutter > [class*='col-']:not(:first-child), .row.no-gutter > [class*='col-']:not(:last-child).
InformationsquelleAutor Zim
5

Update : link für TWBS 3 getbootstrap.com/customize/#grid-system

Twitter Bootstrap bietet eine Formular anpassen herunterladen, um alle oder einige Komponenten mit benutzerdefinierten Konfiguration.

Können Sie dieses Formular verwenden, um download-ein Netz ohne Dachrinnen, und es wird ansprechbar sein - Sie müssen nur die grid-Komponente und die reagieren diejenigen, die über die Breite.

Demo (jsfiddle)

Wenn Sie wissen, ein wenig über WENIGER, dann können Sie das generierte CSS in eine Selektor Ihrer Wahl.
```
/* LESS */
.some-thing {
    /* The custom grid
      ...
    */
}
```
Wenn nicht, sollten Sie diese Auswahl vor jeder Regel (nicht, dass viel sowieso).

Wenn Sie wissen WENIGER und die WENIGER Skripte zur Verwaltung Ihrer Stile, die Sie möglicherweise verwenden möchten, direkt die Grid-Mixins in Verbindung v2 (github)

Grid-Mixins in Verbindung v3 (github)
- getbootstrap.com/customize
InformationsquelleAutor Sherbrow
2

Die gesamte Breite berechnet sich mit der Breite der Elemente sowie die Breite der margin-Raum. Wenn Sie möchten, entfernen Sie die Marge Raum, das ist in Ordnung, aber um zu vermeiden, dass die Lücke, die Sie erwähnt, müssen Sie auch erhöhen Sie die Breite der Spalten.

In diesem Fall, Sie brauchen, um erhöhen Sie die Breite einer einzelnen Spalte, die von seinen entfernt Marge Raum, das wäre 30px.

Also lasst uns sagen, dass Ihre Spalten Breite von 50PX in der Regel mit 30PX margin-Raum. Entfernen Sie die Marge Raum und stellen Sie die Breite 80PX.

InformationsquelleAutor Michael

Beispiel 4 Spalten span3. Für andere Spannweiten verwenden, neue Breite = alte Breite + Bundsteg Größe.
Nutzen Sie media queries, um es entgegenkommend.

css:

    <style type="text/css">
    @media (min-width: 1200px) 
    {   
        .nogutter .span3
        {
            margin-left: 0px; width:300px;
        }   
    }
    @media (min-width: 980px) and (max-width: 1199px) 
    { 
        .nogutter .span3
        {
            margin-left: 0px; width:240px;
        }   
    }
    @media (min-width: 768px) and (max-width: 979px) 
    { 
        .nogutter .span3
        {   
            margin-left: 0px; width:186px;
        }   
    }
    </style>

html:

<div class="container">
<div class="row">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div>
<br>
<div class="row nogutter">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div> 
</div>

update:
oder teilen Sie eine span12 div 100/numberofcolumns % Breite Teile floating Links:

<div class="row">
  <div class="span12">
    <div style="background-color:green;width:25%;float:left;">...</div>
  <div style="background-color:yellow;width:25%;float:left;">...</div>
  <div style="background-color:red;width:25%;float:left;">...</div>
  <div style="background-color:blue;width:25%;float:left;">...</div>
  </div>
</div>

Für beide Lösungen finden Sie unter: http://bootply.com/61557

InformationsquelleAutor Bass Jobsen

Interessant...

Entfernen der Dachrinne in Twitter Bootstrap-Standard-raster, das ist 940px breit. Und dass das Standard-grid hat 940px Breite container und hat die bootstrap-responsive.css in stylesheet.

Wenn ich Ihre Frage richtig, das ist, wie ich es Tat...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stackoverflow Question</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/bootstrap-responsive.css">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->




    <style type="text/css">
        #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
        }

        @media (min-width: 768px) and (max-width: 979px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
            }
        }


        @media (max-width: 767px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        @media (max-width: 480px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        <!-- For Visual Aid Only -->
        .bg1 {
            background-color: #C2C2C2;
        }

        .bg2 {
            background-color: #D2D2D2;
        }
    </style>
  <body>
    <div id="wrap">
        <div class="container">
            <div class="row-fluid">
                <div class="span1 text-center bg1">01</div>
                <div class="span1 text-center bg2">02</div>
                <div class="span1 text-center bg1">03</div>
                <div class="span1 text-center bg2">04</div>
                <div class="span1 text-center bg1">05</div>
                <div class="span1 text-center bg2">06</div>
                <div class="span1 text-center bg1">07</div>
                <div class="span1 text-center bg2">08</div>
                <div class="span1 text-center bg1">09</div>
                <div class="span1 text-center bg2">10</div>
                <div class="span1 text-center bg1">11</div>
                <div class="span1 text-center bg2">12</div>
            </div>



            <div id="main_content">
                <div class="row-fluid">
                    <div class="span3 text-center bg1">1</div>
                    <div class="span3 text-center bg2">2</div>
                    <div class="span3 text-center bg1">3</div>
                    <div class="span3 text-center bg2">4</div>
                </div>
            </div>
        </div><!--/container-->
    </div>
  </body>
</html>

Und das Ergebnis ist..

Entfernen der Dachrinne Raumes für einen bestimmten div nur

Den 4 div-span ohne Dachrinne bleibt spanned für Small tablet landscape (800 x 600). Etwas kleiner als das zusammenbrechen der 4 divs, und es wird vertikal gestapelt werden. Natürlich haben Sie es zu zwicken, um Ihre Bedürfnisse anzupassen.

InformationsquelleAutor GaryP

0

Einfachste Weg zum entfernen von padding und margin ist mit einfachen css.
```
<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>
```
InformationsquelleAutor Gammer
0

Okay, Wenn Sie möchten, ändern Sie die Dachrinne in einer Zeile, aber diese (erste und Letzte) innere divs ausrichten mit der grid-Umgebung die .no-gutter Zeile, könnte man die copy-paste-merge die meisten Antworten in dem folgenden Codeausschnitt:
```
.row.no-gutter [class*='col-']:first-child:not(:only-child) {
    padding-right: 0;
}
.row.no-gutter [class*='col-']:last-child:not(:only-child) {
    padding-left: 0;
}
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child):not(:only-child) {
    padding-right: 0;
    padding-left: 0;
}
```
Wenn Sie möchten, um eine kleinere Rinne, anstatt komplett keine, ändern Sie einfach die 0 ist, was Sie wollen... (zB: 5px zu bekommen 10px Dachrinne).

InformationsquelleAutor Brainfeeder
-1

Hinzufügen Skelly ' s Bootstrap 3 no-Rinne Antwort oben (https://stackoverflow.com/a/21282059/662883)

Fügen Sie den folgenden, um zu verhindern, dass die Dachrinnen auf eine Zeile enthält nur eine Spalte (nützlich bei der Verwendung von column-Verpackung: http://getbootstrap.com/css/#grid-example-wrapping):
```
.row.no-gutter [class*='col-']:only-child,
.row.no-gutter [class*='col-']:only-child
{
    padding-right: 0;
    padding-left: 0;
}
```
- Keine Notwendigkeit, verwenden Sie die Elementauswahl, zweimal ... ?
InformationsquelleAutor Stu

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.