Divider右边1px自举col

我是bootstrap 4的新手，遇到问题。我想把一个1px的分频器放在每个列的右侧。Divider右边1px自举col

问题是分配器没有整个卡片高度，因为所有的代码都在一张卡片中。我尝试了很多次，但不起作用。如果我把高度：100像素，为前，作品，但我想这是一个丑陋的解决方案。

有人可以告诉我如何做到这一点？

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

来源

2017-08-09 dragon

从卡（PREF给它的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

来源

2017-08-09 13:19:25

Divider右边1px自举col

回答

相关问题