山沟阴影

Question

使用 Bootstrap 4 时，我将行划分为 4 col-3，每个 col-3 划分为具有 col-12 的 2 行。默认装订线正是我所需要的，但是当我想要对 div 进行阴影处理时，它会像没有装订线一样出现阴影，我需要一个解决方案。

在上图中，您可以看到忽略排水沟的阴影，我在 div 周围画的红线是我希望阴影出现的位置。

<div class="row mt-4">

        <div class="col-sm-3 shadow-sm">
            <div class="row">
                <div class="col-12">
                    <div class="bluebg text-white p-2">
                        <span class="text-uppercase">Sign In</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <i class="text-dark fas fa-user fa-7x my-3"></i>
                        <p class="redtext text-uppercase font-weight-bold my-1">Sign In</p>
                        <p>Login with your roblox username.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-3 shadow-sm">
            <div class="row">
                <div class="col-12">
                    <div class="bluebg text-white p-2">
                        <span class="text-uppercase">Sign In</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <i class="text-dark fas fa-user fa-7x my-3"></i>
                        <p class="redtext text-uppercase font-weight-bold my-1">Sign In</p>
                        <p>Login with your roblox username.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-3 shadow-sm">
            <div class="row">
                <div class="col-12">
                    <div class="bluebg text-white p-2">
                        <span class="text-uppercase">Sign In</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <i class="text-dark fas fa-user fa-7x my-3"></i>
                        <p class="redtext text-uppercase font-weight-bold my-1">Sign In</p>
                        <p>Login with your roblox username.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-3 shadow-sm">
            <div class="row">
                <div class="col-12">
                    <div class="bluebg text-white p-2">
                        <span class="text-uppercase">Sign In</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <i class="text-dark fas fa-user fa-7x my-3"></i>
                        <p class="redtext text-uppercase font-weight-bold my-1">Sign In</p>
                        <p>Login with your roblox username.</p>
                    </div>
                </div>
            </div>
        </div>

</div>

这是我遇到问题的代码。

Answer 1

我做过的几件事：

• 以container-fluid div 开头，因为以row 开头的类会在底部滚动显示
• shadow-sm 类在col-sm-3 中拥有自己的 div
• col-sm-3 中不需要 2 个 row div

工作sn-p如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class='container-fluid'>
  <div class="row mt-4">

    <div class="col-sm-3 ">
      <div class='shadow-sm'>
        <div class="row">
          <div class="col-12">
            <div class="bluebg text-white p-2">
              <span class="text-uppercase">Sign In</span>
            </div>
          </div>
          <div class="col-12">
            <div class="text-center">
              <i class="text-dark fas fa-user fa-7x my-3"></i>
              <p class="redtext text-uppercase font-weight-bold my-1">Sign In</p>
              <p>Login with your roblox username.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-3 ">
      <div class='shadow-sm'>
        <div class="row">
          <div class="col-12">
            <div class="bluebg text-white p-2">
              <span class="text-uppercase">Sign In</span>
            </div>
          </div>

          <div class="col-12">
            <div class="text-center">
              <i class="text-dark fas fa-user fa-7x my-3"></i>
              <p class="redtext text-uppercase font-weight-bold my-1">Sign In</p>
              <p>Login with your roblox username.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-3">
      <div class="shadow-sm">
        <div class="row">
          <div class="col-12">
            <div class="bluebg text-white p-2">
              <span class="text-uppercase">Sign In</span>
            </div>
          </div>

          <div class="col-12">
            <div class="text-center">
              <i class="text-dark fas fa-user fa-7x my-3"></i>
              <p class="redtext text-uppercase font-weight-bold my-1">Sign In</p>
              <p>Login with your roblox username.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-3 ">
      <div class="shadow-sm">
        <div class="row">
          <div class="col-12">
            <div class="bluebg text-white p-2">
              <span class="text-uppercase">Sign In</span>
            </div>
          </div>

          <div class="col-12">
            <div class="text-center">
              <i class="text-dark fas fa-user fa-7x my-3"></i>
              <p class="redtext text-uppercase font-weight-bold my-1">Sign In</p>
              <p>Login with your roblox username.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>