时间戳

首页 > 解决方案 > 如何在桌子下面放一张卡片？

html - 如何在桌子下面放一张卡片？

问题描述

我确实使用引导程序来生成以下代码：

 <div class="container">
    <div class="row text-center">
      <div class="col-lg-3">
        <ul class="row list-unstyled">
          <li class="col-lg-12">
            <div class="bg-danger text-light">#1</div>
          </li>
          <li class="col-lg-12">
            <div>0</div>
          </li>
        </ul>
      </div>
      <div class="col-lg-3">
        <ul class="row list-unstyled">
          <li class="col-lg-12">
            <div class="bg-danger text-light">#2</div>
          </li>
          <li class="col-lg-12">
            <div>0</div>
          </li>
        </ul>
      </div>
      <div class="col-lg-3">
        <ul class="row list-unstyled">
          <li class="col-lg-12">
            <div class="bg-danger text-light">#3</div>
          </li>
          <li class="col-lg-12">
            <div>0</div>
          </li>
        </ul>
      </div>
      <div class="col-lg-3">
        <ul class="row list-unstyled">
          <li class="col-lg-12">
            <div class="bg-danger text-light">Buttons</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#1</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#2</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#3</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#4</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#5</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#6</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#7</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#8</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#9</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#10</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-9">
        <div class="container">
            <div class="row">
              <div class="col-lg-12">
                <div class="card-deck">
                    <div class="card">
                        <div class="card-body">
                        <h4 class="card-title">Title</h4>
                        <p class="card-text">Some text</p>
                        <button type="button" class="btn btn-danger">button</button>
                        <p class="card-text"><small class="text-muted">Some more text</small></p>
                        </div>
                    </div>
                </div>
            </div>
            </div>
          </div>
        
      </div>
    </div>
  </div>

这就是它现在的样子：

现在的样子

我应该怎么做才能把卡片向上移动我只想把卡片向上移动，让它在桌子的正下方。如果它最终看起来像这样，那就太好了：

它应该是什么样子

我真的尝试了所有我能想到的。但是，仍然没有任何效果。我希望有人可以帮助我。

标签： htmlcssbootstrap-4

解决方案

要实现所需的布局，您需要了解引导网格的工作原理！

您的实现中的主要问题是您要创建两行，其中一行用于顶部标题和按钮集合，另一行用于卡片元素。因为这一行，它占据了整个 100% 的宽度。

因此，我将向您展示使用抽象实现布局的方法（不使用整个代码块）

创建一行并在其中添加两列（col-lg-9和col-lg-3），这使得列数为 12，占据全宽。现在在里面col-lg-9再创建两行，第一行你的标题会出现，第二行会出现卡代码。您可以在其中col-lg-3编写您的按钮集合。如下所示：

<div class="row">
  <div class="col-lg-9">
    <div class="row">
      <div class="col-lg-4">#1</div>
      <div class="col-lg-4">#2</div>
      <div class="col-lg-4">#3</div>
      <div class="col-lg-4">0</div>
      <div class="col-lg-4">0</div>
      <div class="col-lg-4">0</div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <!-- Your card code goes here -->
      </div>
    </div>
  </div>
  <div class="col-lg-3">
    <!-- Your button collection code goes here -->
  </div>
</div>

推荐阅读