Css 添加带边框和集中文本的引导面板

我尝试在引导中创建两个面板，其中包含集中的文本和文本中的不同字体。如下图所示

我的代码：

<div class="row">
    <div class="col-lg-6">
        <div class="panel panel-default text-center">
            <p>
                Collected This Quarter <br>
                <b>$8084</b>
            </p>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="panel panel-default text-center">
            <p>
                Average Property Income YTD <br>
                <b>$16,985</b>
            </h4>
        </div>
    </div>
</div>

本季度已收款

$8084


年初至今平均财产收入

$16,985

但是，我的输出是：

如何使面板外的“阴影”和面板内的文本具有与上图类似的字体

---

谢谢你

我也曾经面对过这个问题。因此，这里是解决方法

• 添加顶级子div并给它们填充（如

  p-1

  ）。这是他们唯一的工作
• 在每个顶级div中，添加您的

  单元格的

  主要内容，并根据需要设置样式

这是密码

<div class="parent row">
  <div class="col-lg-6 p-1">
      <div class="shadow-sm text-center child">
          <p class="p-0 m-0">
              Collected This Quarter <br>
              <b>$8084</b>
          </p>
      </div>
  </div>
  <div class="col-lg-6 p-1">
      <div class="shadow-sm text-center child">
        <p class="p-0 m-0">
          Average Property Income YTD <br>
              <b>$16,985</b>
          </h4>
      </div>
  </div>
</div>

结果是这样的

---

注意：我使用了

bg-dark

和

bg-light

类来显示父div和子div的背景色。你可以给他们任何你想要的颜色。

我也曾经面对过这个问题。因此，这里是解决方法

• 添加顶级子div并给它们填充（如

  p-1

  ）。这是他们唯一的工作
• 在每个顶级div中，添加您的

  单元格的

  主要内容，并根据需要设置样式

这是密码

<div class="parent row">
  <div class="col-lg-6 p-1">
      <div class="shadow-sm text-center child">
          <p class="p-0 m-0">
              Collected This Quarter <br>
              <b>$8084</b>
          </p>
      </div>
  </div>
  <div class="col-lg-6 p-1">
      <div class="shadow-sm text-center child">
        <p class="p-0 m-0">
          Average Property Income YTD <br>
              <b>$16,985</b>
          </h4>
      </div>
  </div>
</div>

结果是这样的

---

注意：我使用了

bg-dark

和

bg-light

类来显示父div和子div的背景色。你可以给它们任何你想要的颜色。

看看这个，用

。面板主体

包装

---

我建议使用最新版本的Bootstrap，您将获得阴影和间距的实用程序类。

查看此，已使用

。面板主体

包装器

---

我建议使用最新版本的Bootstrap，您将获得阴影和间距的实用程序类。

您从何处获得该图像？从中获取样式。我没有图像的链接。只是一张照片你从哪里得到的照片？从中获取样式。我没有图像的链接。请举个例子好吗？等一下，我在帮你。实际上，它设置了一个黑色边框。我试图应用一个阴影效果，就像post中的图像一样。你可以使用bootstrap阴影类来处理阴影，你提供的图像很小，可以注意到细节。此外，实际的问题是如何给单元格留出空间。关于阴影，请提供一个更清晰的图像，并作为一个新问题发布。你能举个例子吗？请稍等，我正在回答你。实际上，它设置了一个黑色边框。我试图应用一个阴影效果，就像post中的图像一样。你可以使用bootstrap阴影类来处理阴影，你提供的图像很小，可以注意到细节。此外，实际的问题是如何给单元格留出空间。关于阴影，请提供一个更清晰的图像，并作为一个新问题发布。