css - 如何使用 bootstrap 在左侧显示图像，在右侧显示内容

我正在尝试实现列表/网格切换。我有网格，我想切换到列表，所以我想在左侧显示图像，在右侧显示内容。

HTML代码：

<div class="card infinite-item">
  <div class="img-dimension">
    <img class="card-img-top" src="/media/category/img.jpeg" alt="Card image cap">
  </div>
  <div class="card-body">
    <h5 class="card-title">idea 01</h5>
    <div class="card-text">
          <p>Phasellus a est. Nam eget dui. Pellentesque ut neque. Nunc sed turpis. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi.</p>
    </div>
    <div class="text-left pb-2 pt-2">
        <a id="idea_detail_1" href="/idea/1/">Details...</a>
    </div>
    <div class="text-right card-icons">
      <span class="badge badge-secondary">Discussion</span>
      <a class="like badge">
        like button
      </a>
      <a class="dislike badge">
        dislike button
      </a>
      <a href="#" class="badge comments">
        comments
      </a>
    </div>
  </div>
  <div class="card-footer">
    footer
  </div>
</div>

我没有更改CSS，所以它是引导程序的默认CSS代码：

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card-img-top {
    width: 100%;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-title {
    margin-bottom: .75rem;
}

最佳答案

.card {
    display: flex;
    flex-direction: row;
    align-items: center; /* optional */
}

您可以将flex-direction: column更改为flex-direction: row以解决您的问题。

关于css - 如何使用 bootstrap 在左侧显示图像，在右侧显示内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53170811/