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>

希望这会有所帮助！