Wie setze ich mehr Platz zwischen den Blöcken Bootstrap?

Meine Homepage besteht aus mehreren Blöcken (oberer Teil/mittlerer Teil/unterer Teil). Ich habe für jeden Block eine Zeile erstellt. Ich möchte etwas Platz zwischen meinen Blöcken in Bootstrap hinzufügen. Kann ich einfach meine Zeilen-IDs geben und etwas Marge hinzufügen, oder ist das falsch?Wie setze ich mehr Platz zwischen den Blöcken Bootstrap?

Struktur meines Codes:

<div class="container" id="ho_main_content"> 
    <div class="row"> 
     <div class="col-md-12 text-center"></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"></div> 
     <div class="col-md-6"></div> 
    </div> 
</div>

Quelle

2016-10-11 Engo

[https://jsfiddle.net/tjbaezid/vwtfzhcL/1/] suchen etwas wie dieses ?? Mach dir keine Sorgen über die Grenze Ich mache es nur für das Verständnis –

So ist es in Ordnung, eine Klasse zu Zeilen hinzufügen und etwas Marge hinzufügen? Ich war mir nicht sicher, ob dies das Richtige in Bootstrap ist ... – Engo

Ja, es ist eine gute Idee, eine extra nützliche Klasse wie diese zu machen. Sie können eine Klasse .nopadding {padding: 0;} erstellen und sie an einer Stelle verwenden, an der Sie nicht auffüllen möchten. Es gibt noch viel mehr, das Sie erstellen können. –

Diese "Antwort" von mir wirklich ein Kommentar sein sollte; Ich habe jedoch nicht genug Rep.

Für eine Antwort, ja, eine andere Klasse die divs mit der row Klasse geben, wahrscheinlich so etwas wie dies, Abstand der oberen und unteren Rand jeder 10px:

.part { margin: 10px 0; }

Eine wichtige Sache zu denken, wenn Frameworks wie Bootstrap zu verwenden ist, dass es nicht das Ende der Welt ist, wenn Sie die Komponenten oder den Abstand oder etwas ändern. Manche Dinge werden nicht so aussehen, wie Sie es wollen; Geben Sie ihnen einfach zusätzliche Klassen, oder wenn Sie verzweifelt sind, verwenden Sie die !important Flagge. Es wurde schließlich auf der gleichen Technologie gebaut.

Quelle

2016-10-11 20:23:00 vladdobra

/*you can create your own custom css for use here is some example*/ 
 
.border { 
 
    border: 1px solid red; /* just to make sure space between blocks*/ 
 
} 
 

 
.margin-top { 
 
    margin-top: 5px; 
 
} 
 
    
 
.nopad{ 
 
padding:0 ; 
 
} 
 
div[class*='spacer-'] { display: block; } 
 
.spacer-mini { height: 20px; } 
 
.spacer-small { height: 40px; } 
 
.spacer-medium { height: 60px; } 
 
.spacer-big { height: 100px; }

<head> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
<div class="container" id="main_content"> 
 
    <div class="row border margin-top"> 
 
<div class="col-md-12 text-center">text1</div> 
 
    </div> 
 
    <div class="row border margin-top"> 
 
<div class="col-md-12">text2</div> 
 
    </div> 
 

 
<div class="spacer-mini"></div> <!-- Using Spacer-Mini and avoiding the margin top --> 
 

 
    <div class="row"> 
 
<div class="col-md-6 col-xs-6 border">part1</div> 
 
<div class="col-md-6 col-xs-6 border">part2</div> 
 
    </div> 
 
</div> 
 
</body>

Quelle

2016-10-11 20:31:10

Wie setze ich mehr Platz zwischen den Blöcken Bootstrap?

Antwort

Verwandte Themen