代码之家 › 专栏 › 技术社区 › thebenCA

引导4卡行?

bootstrap-4 twitter-bootstrap

-1

thebenCA · 技术社区 · 8 年前

我正在使用Bootstrap 4中的card deck类。我希望h4在卡中的img缩略图类的右侧对齐。

<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 回复 | 直到 8 年前

1

0

Adel Elkhodary 8 年前

给我一个 width 到班级 .img-thumbnail 因为默认情况下,img max-width:100%; 您必须定义 宽度 和 text-align:right; 到班级 .card-title 然后把它们包在一个div里

.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;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="card-deck">
  <div class="card">
  <div class="card-heading">        <img class="img-thumbnail" src="http://placehold.it/30x30" alt="IMG ALT TEXT">
    <h4 class="card-title">Header</h4></div>
    <div class="card-block">
      <p class="card-text">More Text Here</p>
    </div>
  </div>
</div>