css - 添加带有边框和集中文本的 Bootstrap 面板

Question

我正在尝试在引导程序中创建两个面板，其中包含集中的文本和文本中的不同字体。就像下面的图片

我的代码：

<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>

但是，我的输出是：

我怎样才能让面板外面的“阴影”和里面的文字与上图的字体相似？

谢谢

标签： cssbootstrap-4

Answer 1

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

• 添加顶级子 div 并给它们填充（如p-1）。这是他们唯一的工作。
• 在每个顶级 div 中，添加您的cell's主要内容，并根据需要设置它们的样式。

这是代码

<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>

.row通常我会为和.col类重置填充和边距

<style>
  .row, .col-lg-6 {
    padding: 0;
    margin:0;
  }
  .child {
    background-color: white;
  }
  .parent {
    background-color: #F3F4F5;
  }
</style>

结果是这样的 注意：我使用bg-dark和bg-light类来显示父子 div 的背景颜色。你可以给他们任何你想要的颜色。