ブートストラップ4カード絶対分割コンテンツ

Question

丸いアイコンをカードの中央に追加しようとしていますが、アイコンの一部が途切れるという問題があります。ありがとう

.header-icon-round { 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    font-size: 30px; 
 
    background-color: #fff; 
 
    color: gray; 
 
    border: 2px solid #dedede; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    line-height: 60px; 
 
    position: absolute; 
 
    top: -10px; 
 
    left: 50%; 
 
    margin-left: -30px; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
\t 
 
<div class="container-fluid"> 
 
    <div class="card-columns"> 
 
     <div class="card card-block text-xs-center"> 
 
      <div class="header-icon-round"> 
 
       <i class="ti-wallet"></i> 
 
      </div> 
 
      <h4 class="card-title" style="padding-top: 80px;"> 
 
       My title 
 
      </h4> 
 
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore quod ab.</p> 
 
      <a href="" class="btn btn-outline-primary btn-rounded">Button Call</a> 
 
     </div> 
 
    </div> 
 
</div>

それを考え出す助けが必要です！

Answer 1

position: absolute; top: -10px;を.header-icon-roundクラスから削除するだけです。

.header-icon-round { 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    font-size: 30px; 
 
    background-color: #fff; 
 
    color: gray; 
 
    border: 2px solid #dedede; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    line-height: 60px; 
 
    /*position: absolute;*/ 
 
/* \t  top: -10px;*/ 
 
    left: 50%; 
 
    margin-left: -30px; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
\t 
 
<div class="container-fluid"> 
 
    <div class="card-columns"> 
 
     <div class="card card-block text-xs-center"> 
 
      <div class="header-icon-round"> 
 
       <i class="ti-wallet"></i> 
 
      </div> 
 
      <h4 class="card-title" style="padding-top: 80px;"> 
 
       My title 
 
      </h4> 
 
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore quod ab.</p> 
 
      <a href="" class="btn btn-outline-primary btn-rounded">Button Call</a> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

私は最近、ここに同じ質問に答え： Cards crops bootstrap 4

をこれがアルファ4で導入された既知の問題です（アルファ5に固定されます）：https://github.com/twbs/bootstrap/issues/20654

回避策があります使用する。

.card-columns .card { 
    display: inline-block; 
    width:100%; 
} 

http://www.codeply.com/go/1V7ssBt8xq