Начальная версия Bootstrap

Question

Элементы в карточке встроены. Нет проблем с этим. Но я пытаюсь сделать этот div <div class="d-inline-flex align-top"> встроенным в изображение, а не друг в друга.

Пытался удалить класс d-inline, но на этот раз текст переходит под изображение.

<div class="card-body">
       <div class="d-inline-flex"><img src="{{$estate->image}}" id="image"></div>
       <div class="d-inline-flex align-top">
            <h2>{{$estate->building_name}}</h2>
            <p>{{$estate->address}}</p>
            <p>{{$estate->extend}}</p>
            <p>{{$estate->rooms}}</p>
       </div>
</div>

и это jsfiddle

Answer 1

Добавьте класс d-flex к разделу "card-body".

И удалить класс d-inline-flex.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="card text-left">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">リスト</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">物件概要</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body d-flex">
    <div class=""><img src="https://dummyimage.com/120x120/000/fff" id="image"></div>
    <div class="align-top">
      <h2>{{$estate->building_name}}</h2>
      <p>{{$estate->address}}</p>
      <p>{{$estate->extend}}</p>
      <p>{{$estate->rooms}}</p>
    </div>
  </div>
</div>