Bootstrap 4：僅在實用程序的垂直居中徽章

Question

我正在制作一張Bootstrap 4卡，它的標題需要有圖像，標題，字幕，徽章和關閉按鈕。 徽章需要在右側垂直居中，而圖像，標題和字幕需要在左側垂直居中。

這是一張圖片，它將更好地說明問題：

而且我既看不到標題和副標題，也看不到徽章垂直居中。 我必須僅使用Bootstrap實用程序來執行此操作，因此，如果可能的話，不要使用其他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

在Bootstrap 4中使用flexbox實用程序類 。如果您不熟悉，這是flexbox的很好指南 。

下面代碼中添加的類是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

使用BS 4 flexbox實用程序。 您可以使用d-flex類將卡頭更改為display:flex ，然后相應地對齊其內容...

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

Answer 3

Bootstrap 4主要將flexbox用於其布局/網格實用程序。 您可以使用align-items-*等類在一行中垂直放置元素。 在這種情況下， align-items-center可以用於使項目居中。

您可以在.row .col-*-auto和.col結合使用，以具有Bootstrap自動調整大小元素。

從技術.card ，只要您可以控制表示此“ card”類元素的類，就不需要使用.card 。 網格系統可以讓您更好地控制自定義“卡片”式元素的布局。

這是一個指向plunker的鏈接，它使用內置的Bootstrap 4類演示了功能。

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

希望這會有所幫助！