Col Gutter Shadow

Question

При использовании Bootstrap 4 я разделил ряд на 4 столбца-3 и каждый столбец-3 на 2 ряда, которые имеют столбец-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 класс даст вам прокрутку внизу
• the *Класс 1008 * получает свой собственный div внутри col-sm-3
• , вам не нужно 2 row Divs внутри col-sm-3

Работающий фрагмент ниже:

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