ブートストラップ4：ユーティリティで垂直の中央のバッジ

Question

私は、ヘッダーにイメージ、タイトル、サブタイトル、バッジ、閉じるボタンが必要なブートストラップ4カードを作っています。また、画像、タイトル、サブタイトルを左に縦に並べる必要があるのに対し、バッジは右に縦に中心を置く必要があります。ここで

はイメージです、それはより良いものを説明します：

そして、私はタイトルとサブタイトル、またバッジ垂直方向の中央のいずれかを取得することはできません。私はブートストラップユーティリティを使ってこれをしなければならないので、可能ならば追加のCSSは必要ありません（または他の選択肢がない場合はほとんどありません）。どうすればこれを達成できますか？ここで

は私のコードです：

.close { 
 
    font-size: 20px; 
 
    text-shadow: none; 
 
    color: #000; 
 
    opacity: 1; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.card-title { 
 
    font-size: 18px; 
 
} 
 

 
.card-subtitle { 
 
    font-size: 11px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<div class="card"> 
 
    <button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close"> 
 
     <span aria-hidden="true">&times;</span> 
 
    </button> 
 
    <div class="card-header border-0 py-3"> 
 
    <img src="http://placehold.it/45x45" class="rounded-circle float-left mr-3"> 
 
    <h4 class="card-title mb-0 d-inline align-middle">Card title</h4> 
 
    <span class="badge badge-success float-right px-4 py-1 mt-2">Success</span> 
 
    <h6 class="card-subtitle text-muted">Card subtitle</h6> 
 
    </div> 
 
    <div class="card-block"> 
 
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
    </div> 
 
</div>

Answer 1

あなたが慣れていない場合はここでgood guide to flexboxのブートストラップ4にflexbox utility classesを使用してください。

以下のコードの追加されたクラスはd-flex justify-content-between align-items-centerですが、独自のクラスでタイトルとサブタイトルを囲む新しいラッパーも必要です。

.close { 
 
    font-size: 20px; 
 
    text-shadow: none; 
 
    color: #000; 
 
    opacity: 1; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.card-title { 
 
    font-size: 18px; 
 
} 
 

 
.card-subtitle { 
 
    font-size: 11px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div class="card"> 
 
    <button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close"> 
 
     <span aria-hidden="true">&times;</span> 
 
    </button> 
 

 
<div class="card-header border-0 py-3 d-flex justify-content-between align-items-center"> 
 
    <img src="http://placehold.it/45x45" class="rounded-circle float-left mr-3"> 
 
    <div class="mr-auto"> 
 
     <h4 class="card-title mb-0 d-inline align-middle">Card title</h4> 
 
     <h6 class="card-subtitle text-muted">Card subtitle</h6> 
 
    </div> 
 
    <span class="badge badge-success px-4 py-1 mt-2">Success</span> 
 
    </div> 
 

 
<div class="card-block"> 
 
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
    </div> 
 
</div>

Answer 2

ブートストラップ4それは、レイアウト/グリッドユーティリティだため、主にフレキシボックスを活用しています。行内にはalign-items-*〜vertically positionのようなクラスを使用できます。この場合、align-items-centerを使用して項目を中央揃えることができます。

.col-*-autoをと組み合わせて、.row内にブートストラップの自動サイズ要素を使用するとします。

この「カード」のような要素を表すクラスを制御できる限り、技術的には.cardを使用する必要はありません。グリッドシステムは、カスタムの「カード」要素のような要素のレイアウトをより詳細に制御することができます。

ここには、組み込みのBootstrap 4クラスを使用して機能を示すplunkerへのリンクがあります。

<!-- This extra .row and .col.col-sm-auto allows card to be auto sized --> 
<div class="row"> 
    <div class="col col-sm-auto"> 
     <div class="foo"> 
      <div class="row align-items-center"> 
       <div class="col col-sm-auto"><img class="rounded-circle" src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" /></div> 
       <div class="col col-sm-auto text-center"> 
        <span>TITLE</span> 
        <br> 
        <span>SUBTITLE</span> 
       </div> 
       <div class="col"></div> 
       <div class="col col-sm-auto text-right"> 
        <span>BADGE</span> 
       </div> 
       <div class="col col-sm-auto"> 
        <span class="close">X</span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

この機能が役立ちますように！

Answer 3

BS 4 flexbox utilsを使用してください。 //：あなたは

http://codeply.com/go/qj2pblwSWB

<div class="card"> 
    <button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close"> 
     <span aria-hidden="true">×</span> 
    </button> 
    <div class="card-header bg-info border-0 py-3 d-flex align-items-center"> 
     <img src="http://placehold.it/45x45" class="rounded-circle align-self-start mr-3"> 
     <div> 
      <h4 class="card-title mb-0">Card title</h4> 
      <h6 class="card-subtitle text-muted">Card subtitle</h6> 
     </div> 
     <span class="badge badge-success ml-auto px-4">Success</span> 
    </div> 
    <div class="card-block"> 
     .. 
    </div> 
</div> 

http://codeply.com/go/qj2pblwSWB