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网格来实现此目的。
根据评论中提出的问题，根据要求更新代码段

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

左侧的Bootstrap 4卡接头

1 个答案: