Question

我正在尝试向引导卡添加图标。我希望图标，标题和文本在同一行中。为此，我在卡片图标上使用了left浮动功能，但是没有用。有人可以建议如何做吗？谢谢：）

.card-icon {
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  float: left;
  margin-right: 15px;
  text-align: center;
}

.card-icon i {
  font-size: 48px;
}

<div class="card m-b-30 card-body">
  <div class="card-icon"><i class="mdi mdi-database"></i></div>
  <h3 class="card-title font-24">Available Credits: 2</h3>
  <p class="card-text">2 Email Verification Credits Left</p>
  <div class="d-flex">
    <a href="#" class="btn btn-primary waves-effect waves-light">Buy More Credits</a>
    <a href="#" class="btn btn-light waves-effect waves-light ml-3">Track Your Credits</a>
  </div>
</div>

Answer 1

解决此问题的一种好方法是使用flexbox。

Bootstrap 4有一个d-flex类可以做到这一点。默认情况下，flex-direction是row，因此您的i h3和p将位于同一行。并且要确保元素将填充所有可用宽度，请在每个元素中添加flex-fill类。 align-items-center类将尝试使垂直轴居中（但元素的边距顶部/底部可以覆盖此行为）。

    <div class="card m-b-30 card-body">
            <div class="d-flex align-items-center">
                <div class="card-icon flex-fill"><i class="mdi mdi-database">a</i></div>
                <h3 class="card-title font-24 flex-fill">Available Credits: 2</h3>
                <p class="card-text flex-fill">2 Email Verification Credits Left</p>
            </div>
            <div class="d-flex">
              <a href="#" class="btn btn-primary waves-effect waves-light">Buy More Credits</a>
              <a href="#" class="btn btn-light waves-effect waves-light ml-3">Track Your Credits</a>
            </div>
    </div>

Answer 2

将h3和p元素添加到div元素的内部。如果这样做不起作用，请确保页面元素的宽度占百分比，并确保它们的总和等于或小于100％。

编辑：

在您的CSS中添加

display: inline-block;

对所有这些元素。

如何在引导卡中添加标题和文本在同一行的图标

2 个答案: