HTML 和 CSS：Bootstrap 列

Question

我正在尝试创建一个网格系统，但我不知道如何放置列。更清楚地说，我希望水平卡片一张一张地放在另一张卡片下面，而不是分开。我尝试更改块的顺序，但似乎根本不起作用。我正在使用 Bootstrap 4。

<div class="row">

        <div class="col-lg-8 col-md-12">

          <div class="card">

            <div class="card-header card-header-text card-header-warning">

              <div class="card-text">

                Welcome back, <b><?php echo $display_name; ?></b>!

              </div>

            </div>

            <div class="card-body">

            <h4 class="card-title">Info</h4>

              <p class="card-text">

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras odio dui, sodales vitae fringilla quis, porta in nunc..

              </p>

              <footer class="blockquote-footer">Lorem</footer>

            </div>

          </div>

        </div>

        <div class="col-md-4">

          <div class="card">

              <div class="card-header card-header-text card-header-danger">

                <div class="card-text">

                  <h4 class="card-title">News</h4>

                </div>

              </div> 

            <?php

            while($row = $stmtNews->fetch(PDO::FETCH_ASSOC)){

              $row['date'] = date('j M', strtotime($row['date']));

            ?>

            <div class="card-body" style="max-height: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">

                <?php echo $row['news']; ?>

                <div class="card-footer">

                  <div class="card-text">

                    <small class="text-time"><?php echo $row['date']; ?></em></small>

                  </div>

                </div>

            </div>

            <div class="dropdown-divider" style="margin: 15px;"></div>

            <?php

            }

Answer 1

我不知道你到底想要实现什么，但也许这种方法可以帮助你：&nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-9">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Level 1: .col-sm-9&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Level 2: .col-12&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Level 2: .col-12&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Level 1: .col-sm-2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Level 2: .col-12 with defined or dynamic height&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>结果是这个网格：这可能不是最好的主意，但它可能是解决您问题的第一个方法。