Как добавить значок в bootstrap карточку с заголовком и текстом в одной строке

Question

Я пытаюсь добавить значок на карту bootstrap. Я хочу значок, заголовок и текст в одной строке. для этого я использовал float left на иконке карты, но это не сработало. может кто-нибудь посоветовать, как это сделать? спасибо :) 1001

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

На ВСЕ эти элементы.