时间戳

首页 > 解决方案 > 如何将标题移动到 Bootstrap 4 卡片项目内的文本左侧？

css - 如何将标题移动到 Bootstrap 4 卡片项目内的文本左侧？

问题描述

我在 Bootstrap 4 中有一个带有标题和卡片文本的卡片项目，我想将标题移动到非移动屏幕的文本左侧。那怎么可能呢？谢谢！

<div class="card flex-row flex-wrap">
  <div class="card-block px-2">
      <div class="card-title border-0">
        <h3>Some title to be set to the left of the text</h3>
      </div>
      <div class="card-text">
        Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
      </div>
  </div>
</div>

小提琴在这里

标签： cssbootstrap-4

解决方案

使用响应式 flexbox 实用程序类。例如d-flex flex-md-row flex-column在card-body...

    <div class="card">
        <div class="card-body d-flex flex-md-row flex-column px-2">
            <div class="card-title border-0">
                <h3>Some title to be set to the left of the text</h3>
            </div>
            <div class="card-text">
                Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt
                irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore.
                Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
            </div>
        </div>
    </div>

演示：https ://www.codeply.com/go/gtCUz1cd1y

推荐阅读