html - Bootstrap cols 的右分隔符 1px

Question

我是 bootstrap 4 的新手，遇到了问题。我想在每个列的右侧放置一个 1px 的分隔线。

问题是分隔符没有整个卡片高度，因为所有代码都在一张卡片中。我尝试了很多次但没有用。如果我设置高度:100px，例如，可行，但我想这是一个丑陋的解决方案。

谁能告诉我怎么做？

jsfiddle

.divider-right {
    border-right: 1px solid white;
  }
 .fa {
   color: white;
   height: 10px;
 }
 .fa.fa-qrcode {
    float: left;
  }
  .fa.fa-bars {
    float: right;
  }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/b86d1e2e04.js"></script>
<div class="card card-block" style="background-color: #333; border-color: #333;">
  <div class="row">
    <div class="col-1 divider-right">
      <div class="add-event">
        <i class="fa fa-plus-circle" aria-hidden="true"></i>
      </div>
    </div>
    <div class="col-2 divider-right">
      <div class="arrange-events">
        <i class="fa fa-qrcode" aria-hidden="true"></i>
        <i class="fa fa-bars" aria-hidden="true"></i>
      </div>
    </div>
    <div class="col-4 divider-right">
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Event Status
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

从卡片中移除顶部和底部的填充(在你这样做之前最好给它 id，这样你就不会对所有卡片都这样做):

.card {
  padding-top:0; /* you may need !important here if you don't use an id or other more concrete selector */
  padding-bottom:0; /* same here */
}

然后将填充添加到您的列中(无论大小适合您):

.divider-right {
  border-right: 1px solid white;
  padding-top: 10px;
  padding-bottom: 10px;
}

考虑使用另一个类名来使填充更语义化

Updated working fiddle