Question

我是新手4，我遇到了问题。我想在每个col的右侧放一个1px分频器。

问题在于分隔符没有整个卡片高度，因为所有代码都在卡片中。我尝试了很多次但是没有用。如果我把高度：100px，对于ex，有效，但我想这是一个丑陋的解决方案。

有人可以告诉我该怎么做吗？

.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;
}

考虑让paddings的另一个类名更具语义性

Updated working fiddle

分隔右侧1px用于bootstrap cols

1 个答案: