Bootstrap V4 Grid

使用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;
	}
}