左侧的 Bootstrap 4 卡头

Question

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">

  <div class="col-sm-3">
    <div class="card bg-light mb-3" style="max-width: 18rem;">
      <div class="card-header">Logo</div>
      <div class="card-body">
        <h5 class="card-title">Light card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>


</div>

以上代码显示：

+-----------+
| Logo      |
+-----------+
|Content    |
+-----------+

但我需要它：

+------+-----------+
|Logo  | Content   |
+------+-----------+
|  Content         |
+------------------+

我需要左侧的卡片标题。我正在使用最新版本的 Bootstrap。

Answer 1

您可以使用 Bootstrap 网格来实现这一点。
根据评论中提出的问题，根据要求更新 sn-p

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <div class="card bg-light mb-3 col-6">
    <div class="row">
      <div class="card-header col-6 border">Logo</div>
      <div class="card-body col-6 border">
        <h5 class="card-title">Light card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
      <div class="card-body col-12 border">
        <h5 class="card-title">Light card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>