1. Zuhause
  2. Frage und Antwort
  3. Wie Polsterung in den divs in CSS

Wie Polsterung in den divs in CSS

2017-06-21 2 views
0

Mein ganzer Code zu setzen, ist dies, wie Abstand s/w den divs zu setzen? Es ist auf allen Geräten reibungslos laufen mussWie Polsterung in den divs in CSS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="container" style="width:100%"> 
 
     <div class="row" style="height:33%"> 
 
     <div class="col-xs-3" style="height:100%;background-color:#003380;"></div> 
 
     <div class="col-xs-6 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div> 
 
     <div class="col-xs-3 " style="height:100%;background-color:#cce0ff"></div> 
 
     </div> 
 
     <div class="row" style="height:33%"> 
 
     <div class="col-xs-3" style="height:100%;background-color:#66a3ff"></div> 
 
     </div> 
 
     <div class="row" style="height:33%"> 
 
     <div class="col-xs-3 " style="height:100%;background-color:#cce0ff">left</div> 
 
     <div class="col-xs-6 " style="height:100%;background-color:#66a3ff">Center</div> 
 
     <div class="col-xs-3 " style="height:100%;background-color:#003380">Right </div> 
 
     </div> 
 
    </div> 
 
</body>

Quelle

2017-06-21 Aviral Garg

Antwort

0

Sie eine andere Spalte um die Elemente wickeln könnte, das die Polsterung der Umwicklung Spalte macht, dass eine Art Rand/Abstand liefert.

Ist der folgende Code etwas, was Sie anstreben?

.spacing { 
 
    padding: 15px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="container" style="width:100%"> 
 
     <div class="row" style="height:33%"> 
 
     <div class="col-xs-3 spacing"> 
 
      <div class="col-xs-12" style="height:100%;background-color:#003380;"></div> 
 
     </div> 
 
     <div class="col-xs-6 spacing"> 
 
     <div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div> 
 
     </div> 
 
     <div class="col-xs-3 spacing"> 
 
      <div class="col-xs-12" style="height:100%;background-color:#cce0ff"></div> 
 
     </div> 
 
     </div> 
 
     <div class="row" style="height:33%"> 
 
     <div class="col-xs-3 spacing"> 
 
      <div class="col-xs-12" style="height:100%;background-color:#66a3ff"></div> 
 
     </div> 
 
     </div> 
 
     <div class="row" style="height:33%"> 
 
     <div class="col-xs-3 spacing"> 
 
     <div class="col-xs-12" style="height:100%;background-color:#cce0ff">left</div> 
 
     </div> 
 
     <div class="col-xs-6 spacing"> 
 
     <div class="col-xs-12" style="height:100%;background-color:#66a3ff">Center</div> 
 
     </div> 
 
     <div class="col-xs-3 spacing"> 
 
     <div class="col-xs-12" style="height:100%;background-color:#003380">Right </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</body>

EDIT:

Da Sie in alle Richtungen für Abstand suchen (und nicht nur links und rechts), können Sie nur eine zusätzliche Klasse zu den genannten Wrapper hinzufügen spacing und das folgende CSS: (siehe aktuelles Code-Snippet)

.spacing { 
    padding: 15px; 
}

Quelle

2017-06-21 07:57:16

+0

Ich denke, das nicht die Art und Weise optimiert ist und es fügt nur Abstand b/w Spalten i will Abstand in allen vier Seiten gleichermaßen –

0

Versuchen Sie, diese Zugabe Klasse Ihres Sheet

Pad-10{ 
    padding:1%; 
}

und dann die Klasse zu Ihrem divs hinzufügen

<div class="row Pad-10" style="height:33%">

Quelle

2017-06-21 07:49:50

+0

Sein nicht working.Btw Ich habe dies innerhalb des div hinzugefügt –

0

Es gibt mehrere Möglichkeiten, dies zu erreichen:

  1. Indem Sie Ihre jede col mit einem anderen col

<html> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" /> 
 
</head> 
 

 
<body> 
 
    <div class="container" style="width:100%"> 
 
     <div class="row" style="height:33%"> 
 
     <div class="col-xs-3"><div class="col-xs-12" style="height:100%;background-color:#003380;"></div></div> 
 
     <div class="col-xs-6"><div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div></div> 
 
     <div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#cce0ff"></div></div> 
 
     </div> 
 
     <div class="row" style="height:33%"> 
 
     <div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#cce0ff">left</div></div> 
 
     <div class="col-xs-6"><div class="col-xs-12 " style="height:100%;background-color:#66a3ff">Center</div></div> 
 
     <div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#003380">Right </div></div> 
 
     </div> 
 
    </div> 
 
</body>

Dieser Standardraum 30px zwischen zwei schaffen Spalte

  1. Wenn Sie mehr Speicherplatz erstellen möchten, können Sie die Klassen vom Bootstrap verwenden. Aber das wird die Größe Ihrer Spalten verringert
  2. Sie immer individuelle classes Ihre eigenen verwenden kann, um das Raster zu ändern, wie Sie
    3. wollen

Quelle

2017-06-21 07:55:53

0

Einfachste wäre eine Flexbox für die Reihe und Polsterung für die Flex-Elemente verwenden.

.row { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.row div { padding: 1em; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container" style="width:100%"> 
 
    <div class="row"> 
 
    <div class="col-xs-3" style="background-color:#003380;">X</div> 
 
    <div class="col-xs-6 text-center" style="background-color:#66a3ff;">Top </div> 
 
    <div class="col-xs-3 " style="background-color:#cce0ff">X</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-3" style="background-color:#66a3ff">X</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-3 " style="background-color:#cce0ff">left</div> 
 
    <div class="col-xs-6 " style="background-color:#66a3ff">Center</div> 
 
    <div class="col-xs-3 " style="background-color:#003380">Right </div> 
 
    </div> 
 
</div>

Quelle

2017-06-21 07:56:28 Gerard

0

Wenn ich Recht habe, möchten Sie den Abstand zwischen den divs der Klassenzeile ohne Abstand zwischen dem Container div und seinen untergeordneten divs (div.row).

Dafür können Sie die unteren Ränder zu allen Divs außer dem letzten div hinzufügen.

div.row{ 
margin-bottom: [whatever amount of space you want]; //add bottom margin to the row divs 
} 
div.row:last-child{ 
margin-bottom: none; //remove bottom margin from the row div that happens to be the last child in its container(i.e. div.container) 
}

Wenn Sie zu Abstand zwischen den Childs von Zeilen haben wollen: Dies kann als so geschehen

div.row{ 
    margin-bottom: [whatever amount of space you want]; //add bottom margin to the row divs 
    } 
div.row:last-child{ 
    margin-bottom: none; //remove bottom margin from the row div that happens to be the last child in its container(i.e. div.container) 
} 
div.col-xs-3{ 
    margin: [top margin], 0, [bottom margin], 0; 
} 
div.col-xs-6{ 
    margin: [topmargin], 0, [bottom margin], 0; 
}

Quelle

2017-06-21 08:02:18 Strix

0

@Aviral Garg überprüfen Sie bitte folgenden Code. Ich habe Stileigenschaften in Ihrem Code geändert und Klassen "common_row" & "common_box" darin hinzugefügt, mit einigen Eigenschaften. Sie können das Padding in der "common_box" Klasse & margin-bootom in der Klasse "common_row" entsprechend Ihren Anforderungen anpassen. Es funktioniert auf allen Geräten gut, da ich Rasterklassen darin hinzugefügt habe. Ich hoffe, du hast dasselbe erwartet.

.common_row{ 
 
height:33%; 
 
margin-bottom:10px; 
 
} 
 

 
.common_row .common_box{ 
 
padding:10px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container" style="width:100%"> 
 
     <div class="row common_row"> 
 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#003380;"></div> 
 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center common_box"style="background-color:#66a3ff;">Top </div> 
 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 " style="background-color:#cce0ff"></div> 
 
     </div> 
 
     <div class="row common_row" style="height:33%"> 
 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#66a3ff"></div> 
 
     </div> 
 
     <div class="row common_row"> 
 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#cce0ff">left</div> 
 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 common_box" style="background-color:#66a3ff">Center</div> 
 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#003380">Right </div> 
 
     </div> 
 
    </div>

Quelle

2017-06-21 08:06:19 sanjay

Verwandte Themen

 Verwandte Themen