Бутстреп сетка и липкое позиционирование - PullRequest
Новая
       54

Бутстреп сетка и липкое позиционирование

0 голосов
/ 22 февраля 2019

У меня есть схема сетки начальной загрузки, в которой некоторые карты складываются на экранах небольшого размера, затем идут в два столбца с размером MD и 3 столбца с размерами LG +.

У меня есть одна карта, которой я хочу бытьposition: sticky; для размера MD и выше, который работает сам по себе, но имеет проблемы при размещении внутри сетки начальной загрузки, так как различные элементы row и col-* уменьшают свою высоту, а липкие элементы являются липкими по отношению к своим родителямконтейнеры - в основном это означает, что он сразу же дна и больше не липкий 

.tall-card {
  height: 800px;
}

@media (min-width: 768px) {
  .sticky-top-md {
    position: sticky !important;
    z-index: 1020;
    top: 0;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

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

    <div class="col-md-6 bg-primary">
      <section class="card mb-3">
        <div class="card-body tall-card">
          The Tall Card
        </div>
      </section>
    </div>

    <div class="col-md-6 bg-secondary">
      <div class="row" style="background:rgba(255,0,0,.5)">

        <div class="col-lg-6" style="background:rgba(0,255,0,.5)">
          <section class="card mb-3">
            <div class="card-body">
              Middle Card
            </div>
          </section>
        </div>

        <div class="col-lg-6" style="background:rgba(0,0,255,.5)">
          <section class="card mb-3 sticky-top-md">
            <div class="card-body">
              Sticky Card!
            </div>
          </section>
        </div>

      </div>
    </div>
  </div>
</div>

<footer class="border w-100 p-2 bg-info mt-2 text-white text-center">
  The footer
</footer>
или представление на CodePen: https://codepen.io/chrismbarr/pen/YgXeMO

Я нашел способ обойти эту проблему - добавить класс h-100 в родительский элемент rowи col-* классов, которые работают , а карта липкая ... однако теперь только с размером экрана MD (когда стопка двух меньших карт), столбец содержитвыше строки и выходит дальше, чем предполагалось, и заставляет всю страницу прокручиваться ниже нижнего колонтитула. 

.tall-card {
  height: 800px;
}

@media (min-width: 768px) {
  .sticky-top-md {
    position: sticky !important;
    z-index: 1020;
    top: 0;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

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

    <div class="col-md-6 bg-primary">
      <section class="card mb-3">
        <div class="card-body tall-card">
          The Tall Card
        </div>
      </section>
    </div>

    <div class="col-md-6 bg-secondary">
      <div class="row h-100" style="background:rgba(255,0,0,.5)">

        <div class="col-lg-6" style="background:rgba(0,255,0,.5)">
          <section class="card mb-3">
            <div class="card-body">
              Middle Card
            </div>
          </section>
        </div>

        <div class="col-lg-6 h-100" style="background:rgba(0,0,255,.5)">
          <section class="card mb-3 sticky-top-md">
            <div class="card-body">
              Sticky Card!
            </div>
          </section>
        </div>

      </div>
    </div>
  </div>
</div>

<footer class="border w-100 p-2 bg-info mt-2 text-white text-center">
  The footer
</footer>
или просмотр на CodePen: https://codepen.io/chrismbarr/pen/qvdxvx

Что мне нужно сделать, чтобы карта была липкой в ​​размерах MD + и не испортила прокрутку нижнего колонтитула страницы?Вот скриншот того, что происходит, фиолетовая прозрачная фоновая область - это строка и столбец высотой 100%.

row extends past footer

Примечание : цветнойфоны были добавлены к некоторым элементам, чтобы было легче увидеть, какого они размера.Вам нужно будет просмотреть примеры с размером экрана MD, чтобы увидеть, что происходит.

...