Bootstrap 4 卡列 - 每列 X 卡數

Question

我有 60 張卡片要顯示在頁面上。 我想要 3 列，每列 20 張卡片。

我怎樣才能做到這一點？

我的代碼是這樣的。

<div class='container'>
  <div class='card-column'>
    <div class='card>
      Card content 1
    </div>
    <div class='card>
      Card content 2
    </div>
    <div class='card>
      Card content 3
    </div>

  </div>
</div>

Answer 1

使用包含三列和每列 20 張卡片的一行：

 .card { margin: 1rem 0; padding: 1rem; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> <div class="card">Card 5</div> <div class="card">Card 6</div> <div class="card">Card 7</div> <div class="card">Card 8</div> <div class="card">Card 9</div> <div class="card">Card 10</div> <div class="card">Card 11</div> <div class="card">Card 12</div> <div class="card">Card 13</div> <div class="card">Card 14</div> <div class="card">Card 15</div> <div class="card">Card 16</div> <div class="card">Card 17</div> <div class="card">Card 18</div> <div class="card">Card 19</div> <div class="card">Card 20</div> </div> <div class="col-sm-4"> <div class="card">Card 21</div> <div class="card">Card 22</div> <div class="card">Card 23</div> <div class="card">Card 24</div> <div class="card">Card 25</div> <div class="card">Card 26</div> <div class="card">Card 27</div> <div class="card">Card 28</div> <div class="card">Card 29</div> <div class="card">Card 30</div> <div class="card">Card 31</div> <div class="card">Card 32</div> <div class="card">Card 33</div> <div class="card">Card 34</div> <div class="card">Card 35</div> <div class="card">Card 36</div> <div class="card">Card 37</div> <div class="card">Card 38</div> <div class="card">Card 39</div> <div class="card">Card 40</div> </div> <div class="col-sm-4"> <div class="card">Card 41</div> <div class="card">Card 42</div> <div class="card">Card 43</div> <div class="card">Card 44</div> <div class="card">Card 45</div> <div class="card">Card 46</div> <div class="card">Card 47</div> <div class="card">Card 48</div> <div class="card">Card 49</div> <div class="card">Card 50</div> <div class="card">Card 51</div> <div class="card">Card 52</div> <div class="card">Card 53</div> <div class="card">Card 54</div> <div class="card">Card 55</div> <div class="card">Card 56</div> <div class="card">Card 57</div> <div class="card">Card 58</div> <div class="card">Card 59</div> <div class="card">Card 60</div> </div> </div> </div>