使用Bootstrap(v4)网格系统的注意点
Bootstrap提供的网格系统，container中的外层的row，以及里面的列col，只是用来布局，每一列之间是没有间距的，也不要直接在上面在设置间距，否则，会破坏布局。
可以在里面在加一个div，可以设置margin来隔开各个col。col上面不能设置margin-x, margin-left和margin-right，在col里面加一个div.address-item，用来设置margin-right。
<h3 class="text-center">地址薄</h3>
<hr>
<%= link_to '新增地址', new_address_path, class: "btn btn-primary" %>
<% if @carts.size != 0 %>
<%= link_to '结算中心', new_order_path, class: "btn btn-secondary" %>
<% end %>
<div class="row justify-content-start addresses">
<% @addresses.each do |address| %>
<div class="col-sm-12 col-md-6 ">
<div class="address-item">
<span class="address-text">
<%= address.full_address %>
<span>
<span class="address-action">
<%= link_to '编辑', edit_address_path(address), class: "btn btn-primary btn-sm" %>
|
<%= link_to '删除', address, method: :delete,
data: { confirm: '确定删除吗？',
title: '确定是否删除',
commit: '确定',
cancel: '取消',
backdrop: 'static',
keyboard: true,
focus: true,
show: true }, class: "btn btn-primary btn-sm" %>
</span>
</div>
</div>
<% end %>
</div>
<br>
.addresses {
margin-top: 15px;
border: 1px solid black;
border-radius: 9px;
.address-item {
border: 1px solid red;
background-color: rgb(249, 249, 249);
padding: 1rem;
margin-bottom: 1rem;
}
.address-text {
display: block;
margin-bottom: 1rem;
}
.address-action {
display: block;
}
}