Question

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

Fiddle is here

Answer 1

使用自适应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

如何在Bootstrap 4卡项目中将标题移到文本的左侧？

1 个答案: