it-swarm.com.de

Entfernen Sie den Zwischenraum nur für einen bestimmten Bereich

Das Standardgittersystem Bootstrap verwendet 12 Spalten, wobei jeder Bereich die unten angegebene 30px - Rinne aufweist. Dachrinnen sind der Leerraum zwischen den Spalten. Die Dachrinnenbreite scheint zwischen 20px - 30px Zu liegen. Nehmen wir an, es ist 30px Hier.

enter image description here

Ich möchte den Gutter-Raum für ein bestimmtes div entfernen, damit es keinen Gutter-Raum in der Reihe gibt. Jede Spanne wird nebeneinander ohne Dachrinne sein.

Das Problem ist, wenn ich den Rand 30px (Rinne) entferne, verbleibt 360px (12 * 30px) Am Ende der Zeile.

Ausgehend davon, dass ich Gutter-Platz nur für ein bestimmtes div entfernen möchte. Nehmen wir an, dass es sich um divs handelt, die sich im main_contentdiv befinden.

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

Wie kann ich die Rinne für ein bestimmtes div entfernen, ohne die Reaktionsfähigkeit von Bootstrap zu verlieren und ohne Leerzeichen am Ende der Zeile zu lassen?

66
Techie

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

Wir betrachten hier nur die Klasse .span1 (Eine Spalte in einem 12-fachen Raster), aber Sie können erreichen, was Sie wollen, indem Sie den linken Rand entfernen von:

.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive

Ändern Sie dann die Breite von .row-fluid .span1 Auf 100% geteilt durch 12 Spalten (8,3333%).

.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive

Möglicherweise möchten Sie dies tun, indem Sie eine zusätzliche Klasse hinzufügen, mit der Sie das Basisgittersystem intakt lassen können:

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

Sie können dieses Muster auch für alle anderen Spalten wiederholen:

.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 (darauf bestehen, das Standardraster zu verwenden)
Wenn das Standardgittersystem eine Anforderung ist, wird standardmäßig eine Breite von 940px verwendet (dh die Klassen .container und .span12). Im einfachsten Fall möchten Sie also 940 durch 12 teilen. Dies entspricht 12 Containern mit einer Breite von 78,33333px.

So könnte Zeile 339 von bootstrap.css wie folgt bearbeitet werden:

.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)
36
Dawson

Update 2018

Für Bootstrap 3 ist es viel einfacher. Bootstrap 3 verwendet jetzt Abstand anstelle von Rändern, um die "Rinne" zu erstellen.

.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üge einfach no-Gutter für alle Zeilen, in denen der Abstand entfernt werden soll:

  <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 (kein zusätzliches CSS erforderlich)

Bootstrap 4 enthält ein no-gutters Klasse, die auf das gesamte row angewendet werden kann:

http://www.codeply.com/go/pVsGQZVVtG

<div class="row no-gutters">
    <div class="col">..</div>
    <div class="col">..</div>
    <div class="col">..</div>
</div>

Es gibt auch neue Spacing Utils , die die Kontrolle von Abständen/Rändern ermöglichen. Dies kann also verwendet werden, um den Abstand (Gutter) für eine einzelne Spalte zu ändern (dh: <div class="col-3 pl-0"></div>) setzt padding-left:0; in der Spalte, oder verwenden Sie px-0, um sowohl die linke als auch die rechte Polsterung (x-Achse) zu entfernen.

141
Zim

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


Twitter Bootstrap bietet ein Formular anpassen zum Herunterladen aller oder einiger Komponenten mit benutzerdefinierter Konfiguration.

Mit diesem Formular können Sie ein Raster ohne Dachrinnen herunterladen, und es reagiert - Sie benötigen nur die Rasterkomponente und die reagierenden Elemente in Bezug auf die Breite.

Demo (jsfiddle) custom grid

Wenn Sie etwas über LESS wissen, können Sie das generierte CSS in einen Selektor Ihrer Wahl aufnehmen.

/* LESS */
.some-thing {
    /* The custom grid
      ...
    */
}

Wenn nicht, sollten Sie diesen Selektor vor jeder Regel einfügen (sowieso nicht so viel).


Wenn Sie WENIGER kennen und die WENIGER-Skripte zum Verwalten Ihrer Stile verwenden, möchten Sie möglicherweise direkt Grid mixins v2 (github) verwenden

Grid Mixins v3 (Github)

5
Sherbrow

Die Gesamtbreite berechnet sich aus der Breite der Elemente plus der Breite des Randabstands. Wenn Sie den Randabstand entfernen möchten, ist dies in Ordnung, aber um diese von Ihnen erwähnte Lücke zu vermeiden, müssen Sie auch die Breite der Spalten erhöhen.

In diesem Fall müssen Sie die Breite einer einzelnen Spalte um den entfernten Rand vergrößern, der 30 Pixel betragen würde.

Nehmen wir also an, Ihre Spaltenbreite beträgt normalerweise 50 Pixel mit 30 Pixel Randabstand. Entfernen Sie den Randabstand und machen Sie die Breite 80PX.

2
Michael

Beispiel 4 Spalten von span3. Für andere Spannweiten neue Breite = alte Breite + Dachrinnengröße verwenden. Verwenden Sie Medienabfragen, um die Reaktion zu verbessern.

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 teile ein span12 div in 100/numberofcolumns% width Teile, die links schweben:

<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 siehe: http://bootply.com/61557

1
Bass Jobsen

Der einfachste Weg, Polster und Ränder zu entfernen, ist mit einfachem CSS.

<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>
0
Gammer

Interessant...

Entfernen der Rinne im Standardraster von Twitter Bootstrap, dh 940 Pixel breit. Und dass das Standardraster einen 940px breiten Container hat und die Datei bootstrap-responsive.css im Stylesheet enthält.

Wenn ich Ihre Frage richtig gestellt habe, habe ich es so gemacht ...

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

enter image description here

Die 4-Div-Spanne ohne Rinne bleibt für Small Tablet Landscape (800x600) gespannt. Alles, was kleiner ist, wird die 4 Divs kollabieren und vertikal gestapelt. Natürlich müssen Sie es an Ihre Bedürfnisse anpassen.

0
GaryP

Okay, wenn Sie die Rinne in einer Zeile ändern möchten, aber diese (ersten und letzten) inneren Divs am Raster um die Zeile .no-Gutter Ausgerichtet sein sollen, können Sie die meisten Antworten in das folgende Snippet kopieren, einfügen und zusammenführen :

.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 eine kleinere Rinne haben möchten, anstatt komplett keine zu haben, ändern Sie einfach die Nullen zu dem, was Sie möchten ... (zB: 5px, um eine 10px-Rinne zu erhalten).

0
Brainfeeder