css - Bootstrap 4 : Cards: How do I make horizontal repeating cards in three columns

Question

我正在尝试做这样的事情:

卡1卡2卡3 卡4 卡5 卡6 卡7 卡8 卡9 卡10 卡11 卡12 卡13 卡14 卡15 等等......(asp.net 中继器控制)

含义:三栏的水平卡片......所以而不是垂直......我是水平三栏的卡片(就像报纸一样)。

Answer 1

使用单个“row”div 并在其中放置任意数量的“col-sm-4”div。 3 列后它将自动中断。

<div class="row">
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
</div>