Bootstrap 4卡行?

时间:2018-05-17 13:41:43

标签: twitter-bootstrap bootstrap-4

我正在使用Bootstrap 4中的卡片组类。我希望h4排在卡片内img-thumbnail类的右侧。

<div class="card-deck">
                    <div class="card">
                        <img class="img-thumbnail" src="img/camera.svg" alt="IMG ALT TEXT">
                        <h4 class="card-title">Header</h4>
                        <div class="card-block">
                            <p class="card-text">More Text Here</p>
                        </div>
                    </div>

1 个答案:

答案 0 :(得分:0)

只需向width课程提供.img-thumbnail,因为默认情况下,img需要max-width:100%;您必须为班级widthtext-align:right;定义{ {1}}并将它们包装在div中并给它

.card-title

.card-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.img-thumbnail {
  width: 50px;
}

.card-title {
  text-align: right;
}