Grid Gutter

Die Klassen "row" und "col" haben Aussen- und Innenabstand.

".row" = "margin-left: -15px; margin-right: -15px;
".col-*" = "padding-left:15px; padding-right:15px;

Werden keine oder andere Abstände gewünscht, müssen diese Werte überschrieben werden.

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
    <meta charset=utf-8>
    <title>HTML5 Bootstrap Intern</title>
    <link rel="stylesheet" href="http://depot43.ch/unterlagen/themes/bootstrap/css/bootstrap.css">
    <style>
    
    	[class*="col-"] {
	    padding-right: 0;
	    padding-left: 0;
	  }
    
    </style>
</head>
<body>
<div class="row">
	<div class="col-xs-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt earum error explicabo id doloribus excepturi sit, distinctio saepe tempore?.</div>
	<div class="col-xs-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure porro ducimus deserunt saepe, optio totam eveniet.</div>
	<div class="col-xs-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, eum.</div>
</div>
</body>
</html>


 

            

Anregungen:

Werden den verwendeten Klassen "col-*" die Innenabstände "padding" entfernt, besitzen Texte im Grid keinen Abstand mehr zueinander.

Die Abstände können auf 0 gesetzt oder erhöht werden.

Bei Boxen die über die gesamte Zeilenbreite reichen, kann es erforderlich sein, fixe Innenabstände für alle, nicht aber für die letzte Box setzen:

[class*="col-"] {
 padding-right: 30px;
 padding-left: 0;
 background:#dedede;
 }
 [class*="col-"]:last-child {
 padding-right: 0px;
 padding-left: 0;
 }

Ergänze die CSS-Deklaration und untersuche das Verhalten mit mehr oder weniger Padding.