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

回答

相關問題