如何在塊之間設置更多空間Bootstrap？

我的主頁由多個塊組成（頂部/中部/底部）。我爲每個塊創建了一行。我想在Bootstrap中的塊之間添加一些空格。我可以簡單地給我的行ID和添加一些保證金，還是這是錯的？我的代碼如何在塊之間設置更多空間Bootstrap？

結構：

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

來源

2016-10-11 Engo

[https://jsfiddle.net/tjbaezid/vwtfzhcL/1/]看起來像這一個？不要擔心邊界我只是爲了理解 –

所以可以在行中添加一個類並添加一些邊距。我不確定這是否是在Bootstrap中做的正確的事情...... – Engo

是的，這是一個很好的想法，可以製作一些這樣的額外有用的課程。你可以創建一個類.nopadding {padding：0;}並將它用在你不想填充的地方。還可以創建更多 –

這個「答案」我的真的應該是一個註釋;但是，我沒有足夠的代表。

一個答案，是的，給予與row類的div另一個類，大概是這樣的，間隔每10px的頂部和底部：

.part { margin: 10px 0; }

思考時，一個重要的事情使用類似bootstrap的框架是，如果您修改組件或間距等，它不是世界末日。有些東西看起來不像你想要的;只要給他們額外的班級，或者如果你絕望，使用!important標誌。畢竟，它是建立在相同的技術之上的。

來源

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>

來源

2016-10-11 20:31:10

如何在塊之間設置更多空間Bootstrap？

回答

相關問題