html - 如何在 Bootstrap 中设置两行之间的边距？

Question

如何在bootstrap中设置两行之间的间距，如果我们为每一行使用row类，那么设置边距或填充非常容易。但是，当将所有列设置在一个 row 类下时，无法设置边距。请检查以下代码。

<div class="row">
 <div class="col-sm-4 col-md-3"> Div 1</div>
 <div class="col-sm-4 col-md-3"> Div 2</div>
 <div class="col-sm-4 col-md-3"> Div 3</div>
 <div class="col-sm-4 col-md-3"> Div 4</div>
 <div class="col-sm-4 col-md-3"> Div 5</div>
 <div class="col-sm-4 col-md-3"> Div 6</div>
 <div class="col-sm-4 col-md-3"> Div 7</div>
 <div class="col-sm-4 col-md-3"> Div 8</div>
 <div class="col-sm-4 col-md-3"> Div 9</div>
 <div class="col-sm-4 col-md-3"> Div 10</div>
</div>

在上面的代码中如何为每一行设置边距？

如果代码采用以下格式，我可以设置边距，但它不会提供响应式网格。另外col-md-*和col-sm-*类也是浪费，我们只能使用col-*类。

<div class="row">
     <div class="col-sm-4 col-md-3"> Div 1</div>
     <div class="col-sm-4 col-md-3"> Div 2</div>
     <div class="col-sm-4 col-md-3"> Div 3</div>
     <div class="col-sm-4 col-md-3"> Div 4</div>
</div>

<div class="row">
     <div class="col-sm-4 col-md-3"> Div 5</div>
     <div class="col-sm-4 col-md-3"> Div 6</div>
     <div class="col-sm-4 col-md-3"> Div 7</div>
     <div class="col-sm-4 col-md-3"> Div 8</div>
</div>

<div class="row">
     <div class="col-sm-4 col-md-3"> Div 9</div>
     <div class="col-sm-4 col-md-3"> Div 10</div>
</div>

Answer 1

在每个 div 类中，根据您的要求添加 m-1 或 m-2 以从各个方向添加边距。使用 mt-1 或 mt-2 仅添加上边距，使用 mb-1 或 mb-2 添加下边距。 看这个documentation了解更多示例。