html - 在页面调整大小时 Bootstrap 最后一个子 css 更改

Question

所以我在 bootstrap 中有一个 4 列的行，我想在它们之间添加一个分隔符。我已经通过 css 添加了它，并使 .divider-right:last-child 没有边框。这很好，直到您调整页面大小并且它从 4 列网格变为两列网格。

.divider-right {
  border-right:1px solid #dddddd;
}

.divider-right:last-child {
  border-right:transparent;
}

<section class="container">
	<div class="row">
		<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
			Content box in here
		</div>

		<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
			Content box in here
		</div>

		<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
			Content box in here
		</div>

		<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
			Content box in here
		</div>
	</div>
</section>

Answer 1

这应该可以在视口(viewport)缩小时处理移除边框的问题。

添加适当的Pseudo Class到相关的媒体查询。

.row div.divider-right {
  border-right: 1px solid #f00;
}
.row div.divider-right:last-child {
  border-right: none;
}
@media(max-width:991px) {
  .row div.divider-right:nth-child(2n) {
    border-right: none;
  }
}
@media(max-width:767px) {
  .row div.divider-right {
    border-right: none;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <div class="row">
    <div class="col-sm-6 col-md-3 divider-right">
      <div class="alert alert-info">Content box in here1</div>
    </div>
    <div class="col-sm-6 col-md-3 divider-right">
      <div class="alert alert-info">Content box in here2</div>
    </div>
    <div class="col-sm-6 col-md-3 divider-right">
      <div class="alert alert-info">Content box in here3</div>
    </div>
    <div class="col-sm-6 col-md-3 divider-right">
      <div class="alert alert-info">Content box in here4</div>
    </div>
  </div>
</section>