Создание крайней позиции в правом столбце в Bootstrap 4

Question

Я пытаюсь исправить правую колонку в сетке Bootstrap 4, используя position: fixed.

Вот демоверсия и - это код .

Я хочу, чтобы группа кнопок справа прилипала к окну просмотра при прокрутке документа.Я попытался добавить position: fixed;это не работает должным образом - это вызывает наложение группы кнопок в верхней части окна, например this .

Я уже видел этот ответ при создании столбцовисправлено в Bootstrap, но решения не будут работать при смене положения столбцов.Немногие решения приведут к тому, что правый столбец будет перекрывать верхнюю часть левого столбца на маленьких экранах, что нежелательно.В таких случаях при просмотре на небольших экранах я хочу, чтобы столбцы были сложены (с отключенной функцией закрепления).

Я предпочитаю CSS-решения, но если возможно, я бы также хотел узнать, как это делается в JS.

Answer 1

Bootstrap 4 имеет класс position-fixed для этого ...

<div class="container">
    <div class="row">
        <div class="col-md-9">
            ..
        </div>
        <div class="col-md-3" align="center">
            <div class="position-fixed">
                <button class="btn btn-success btn-custom">
                    <span>Button 1</span>
                </button>
                <br>
                <button class="btn btn-warning btn-custom">
                    <span>Button 2</span>
                </button>
                <button class="btn btn-danger btn-custom">
                    <span>Button 3</span>
                </button>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/exOfOB2Igy

Answer 2

Поместите свои кнопки в другой div, а затем добавьте стиль position: fixed к этому элементу div следующим образом:

<div class="col-md-3" align="center" style="margin-bottom: 40px;/* position: fixed; */">
  <div style="position: fixed;">
    <button class="btn btn-success btn-custom">
    <span>Button 1</span>
    </button>
    <br>
    <button class="btn btn-warning btn-custom">
    <span>Button 2</span>
    </button>
    <button class="btn btn-danger btn-custom">
    <span>Button 3</span>
    </button>
  </div>
</div>

Вы можете сделать стиль классом css и сделать его отображаемым толькона больших экранах