上校天沟阴影

Question

使用Bootstrap 4时，我将行分成4列col-3，每个col-3分成2列具有col-12的行。默认的装订线正是我需要的，但是当我要对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
• 在row内不需要2个col-sm-3 divs

下面的工作代码段：

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