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

在“卡体” div上添加d-flex类。

并删除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>

Bootstrap内联问题

1 个答案: