在開始新行之前，如何讓卡片連續出現以填滿網格？

我有來自表格的資料，并且正在根據該資料創建卡片并將其呈現到螢屏上。但是，它們在左側出現在彼此下方，而不是在開始新行之前先填滿一行：（https://i.stack.imgur.com/dDgvB.png）

我的代碼是：

<div class="container">
        {% for class in all_classes %}
            </br>
            <div class="row-sm-3">
                <div class="col-sm-4">
                    <div class="card-deck">
                        <div class="card text-center">
                            <div class="card-body">
                            <h5 class="card-title">{{ class.class_name}}</h5>
                            <p class="card-text">{{class.teacher_id.username }}</p>
                            <a href="#" class="btn btn-primary">Go To</a>
                            </div>
                        </div>
                    </div>
                    </div>
        {% endfor %}
    </div>

我怎樣才能解決這個問題？

uj5u.com熱心網友回復：

我不確定是什么.row-sm-3，但你甚至不需要.row.

.card-deck具有flex并且將類似于 Bootstrap .row。您的間距（例如 , col-lg-3）.col-md-6應該用在每個.card. 請參閱下面的片段。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div class="container">
  <div class="card-deck">
    <div class="col-12 col-lg-3 col-md-6">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title">{{ class.class_name}}</h5>
          <p class="card-text">{{class.teacher_id.username }}</p>
          <a href="#" class="btn btn-primary">Go To</a>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-3 col-md-6">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title">{{ class.class_name}}</h5>
          <p class="card-text">{{class.teacher_id.username }}</p>
          <a href="#" class="btn btn-primary">Go To</a>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-3 col-md-6">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title">{{ class.class_name}}</h5>
          <p class="card-text">{{class.teacher_id.username }}</p>
          <a href="#" class="btn btn-primary">Go To</a>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-3 col-md-6">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title">{{ class.class_name}}</h5>
          <p class="card-text">{{class.teacher_id.username }}</p>
          <a href="#" class="btn btn-primary">Go To</a>
        </div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

在引導程式中創建網格時，您需要遵循以下結構：

<div class="row">
    <div class="col">Item 1</div>
    <div class="col">Item 2</div>
    <div class="col">Item 3</div>
</div>

但是，您使用row-sm-3，它不起作用。您需要將其更改為 just row。

此外，您的示例中缺少一個</div>結束標簽，但我想這是一個復制粘貼錯誤。

uj5u.com熱心網友回復：

row-sm-3將（Bootstrap 中不存在）更改為row.

<div class="container">
  {% for class in all_classes %}
  <br>
  <div class="row">
    <div class="col-sm-4">
      <div class="card-deck">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">{{ class.class_name}}</h5>
            <p class="card-text">{{class.teacher_id.username }}</p>
            <a href="#" class="btn btn-primary">Go To</a>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

標籤：cssdjango推特引导引导程序 4弹性盒

上一篇：使用ToggleButton重繪ListView.builder

下一篇：Djangohref鏈接未路由到正確的url