Question

我正在使用引导程序中的卡，但似乎无法弄清楚如何实现如下所示的布局：

[card 1 ] [card 2]
          [card 3]

卡片1和卡片2在页面上的宽度相等，卡片3在下面，但卡片2在右边

我尝试使用pull right或float right，但没有运气。

<div class="row">
          <div class="col-sm-6">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
        </div>

Answer 1

尝试此操作，将卡2和卡3放在同一列中：

- news 1 (2018-8-22)
- article 1 (2018-8-22)
- news 2 (2018-7-19)
- article 2 (2018-7-18)
- news 3 (2018-6-13)
- article 3 (2018-6-12)

Answer 2

可以。

<div class="container">
  <h2> Card</h2>
  <div class = "row">
  <div class="card col-md-6">
    <div class="card-body">Basic card 1</div>
  </div>

   <div class="card col-md-6">
    <div class="card-body">Basic card 2</div>
  </div>
  </div>
  <div class = "row">
  <div class=" col-md-6">
  </div>

   <div class="card col-md-6">
    <div class="card-body">Basic card 3</div>
  </div>
  </div>
</div>

Answer 3

我知道OP已经得到了答案，并且他正在使用Bootstrap，但是我只想补充一下，在需要对元素进行网格格式化的情况下，CSS grid可能比Bootstrap更好的选择。

如何使用Bootstrap实现此布局？

3 个答案: