Bootstrap: как исправить-col без нарушения макета

Question

У меня 3-х позиционная раскладка, и она отлично работает, когда все строки прокручиваются. Но если я хочу, чтобы левый и правый фиксировались сверху, мой макет ломается.

Я видел много сообщений, но ничего не работает: Как отключить вертикальную прокрутку в столбце начальной загрузки

Я попробовал это, но мой трехцветный макет пропал, когда я установил левое, а правое - как фиксированное:

<div class="container">
  <div class="row  "  style="margin-top:70px" >
    <div class="col-sm-3 " style="position: fixed !important; "   > 

        <div class="card   ">

          <!--Card image-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>


    </div>


    <div class="col-sm-6  " > 
        <div class="card  ">

          <!--Card image-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Top #1 to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>
        <br/>

        <div class="card   ">

          <!--Card image-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Top #2 to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>

    </div>



    <div class="col-sm-3 " style="position: fixed !important; "   > 
        <div class="card  ">
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>


    </div>


  </div>
</div>

Я ожидал, что левый, правый столбец фиксирован (не прокручивается), а центральный столбец прокручивается.

Когда я использую фиксированный цвет, я получаю неправильный макет

И без фиксированного цвета я получаю ожидаемый макет (но он не соответствует моим требованиям) layout-ok

Почему div col не заставляет все внутри него следовать схеме сетки Bootstrap?

Answer 1

Поймите, что position:fixed элементы удалены из нормального потока DOM. Это означает, что элементы position:fixed больше не позиционируются относительно своих родительских контейнеров или элементов одного уровня .

.

Следовательно, центральный столбец должен быть смещен от левой стороны, так как крайний левый столбец больше не сдвигает его вправо. Для этого вы можете использовать Bootstrap offset-sm-3 class ...

<div class="col-sm-6 offset-sm-3">center</div>

Аналогично, самый правый столбец должен быть сдвинут вправо. В данном случае 9 единиц, так как это общая ширина левого и центрального столбцов.

<div class="col-sm-3 offset-sm-9">right</div>

Кроме того, хранение ваших фиксированных столбцов в container не будет работать, поскольку их ширина относится ко всей ширине области просмотра (а не к ширине родительского контейнера). Я бы порекомендовал использовать container-fluid, поскольку он будет иметь такую ​​же ширину, что и окно просмотра, и позволит столбцам сохранять разметку ширины 25% -75% -25%.

Демо с фиксированной позицией : https://www.codeply.com/go/IyYNYLKQBr

<Ч />

Другой, возможно, более простой вариант - использовать position:sticky в левой и правой колонках. В отличие от position:fixed, липкие столбцы останутся в нормальном потоке DOM. Они не всегда «фиксированы» на странице, но будут отображаться «фиксированными», когда прокрутка позволяет.

Демонстрация прилипшего положения : https://www.codeply.com/go/vxpLuKAu4m

<Ч />

Похожие: фиксированное положение col начальной загрузки