Сделать фиксированное положение столбца в бутстрапе

83

Используя Bootstrap, у меня есть столбец сетки class = "col-lg-3", который я хочу разместить в позиции: fixed, в то время как другой .col-lg-9 находится в нормальном положении (с возможностью прокрутки по странице).

<div class="row">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>

</div>

Точно так же, как в левом столбце на LifeHacker.com. Вы увидите, что левая часть зафиксирована, но я прокручиваю страницу.

Я использую bootstrap v3.1.1

css twitter-bootstrap twitter-bootstrap-3
источник
@Lowkase Я приложил код по запросу.
1
Жду снятия темы "в ожидании". А пока вы можете увидеть мой ответ здесь: jsfiddle.net/dRbe4 . Я смогу объяснить это лучше, когда вопрос будет снова открыт.
Lowkase

Ответы:

87 
<div class="row">
    <div class="col-lg-3">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
       Normal data enter code here
    </div>
</div>
Нага прасанна
источник
3
Определенно предпочтительное решение сейчас!
Скотт
12
Это не работает должным образом на маленьких экранах, правый div будет лежать поверх левого fixed
столбца,
12
бутстрап 4 ?? любые идеи
PirateApp
22
В Bootstrap 4 измените «affix» на «sticky-top»
Тасио Коста,
3
Для информации: Bootstrap отказался от поддержки affix с помощью Bootstrap 4.0. Теперь используйте 'position: sticky', как предлагается здесь: getbootstrap.com/docs/4.1/migration/#components
Antoine Delia
50

повторяя ответ Ихаба, просто используя position:fixedи bootstraps, col-offsetвам не нужно указывать ширину.

<div class="row">
    <div class="col-lg-3" style="position:fixed">
        Fixed content
    </div>
    <div class="col-lg-9 col-lg-offset-3">
        Normal scrollable content
    </div>
</div>
Пабло Фернандес
источник
5
это не работает, если вы измените положение столбцов
didando8a
Это лучшее решение! работает отлично, и CSS не требуется. @ didando8a Если вы измените положение столбцов, просто измените col-lg-offset на новое смещение.
Рой Шоа,
Если кому-то нужна также возможность прокрутки фиксированного столбца, просто добавьте высоту и переполнение. напр style="position:fixed;height:100%;overflow-y:auto;".
Рой Шоа
7
@Roy «Никакой CSS не нужен» - да, это просто тег стиля;)
Майк Ферлендер
4
Это то, что мне было нужно! Обратите внимание, что классы смещения в Bootstrap 4 разные, например offset-lg-3. getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
Nickwesselman
29

Следуя решению здесь http://jsfiddle.net/dRbe4/ ,

<div class="row">
    <div class="col-lg-3 fixed">
        Fixed content
    </div>
    <div class="col-lg-9 scrollit">
        Normal scrollable content
    </div>

 </div>

Я изменил некоторые CSS, чтобы они работали идеально:

.fixed {
        position: fixed;
        width: 25%;
}
.scrollit {
        float: left;
        width: 71%
}

Спасибо @Lowkase за то, что поделились решением.


источник
10
Можно ли получить тот же результат без указания атрибута ширины?
ADIMO
1
Я понимаю, что это должно быть до боли очевидным, но я не могу заставить его работать ... Мне нужен прокручиваемый столбец слева и фиксированный столбец справа. В моем фиксированном столбце есть только метка, но по какой-то причине, когда я устанавливаю эти классы, метка «прилипает» к верхнему левому углу, а не в столбце. Я пробовал все разные комбинации атрибутов стиля, но безрезультатно. Был бы признателен за указатель :)
Рид
1
@ReidBelton поделился Jsfiddle, чтобы я мог помочь вам с кодом.
@ IhabAbdel-Rahim Большое спасибо за предложение! Однако в этом нет необходимости, поскольку с тех пор я отложил этот проект.
Рид
Я сделал то же самое, но когда я добавил фиксированный класс, он исчез. Пожалуйста помоги.
Арпан
21

в Bootstrap 3 class="affix"работает, а в Bootstrap 4 - нет. Я решил эту проблему в Bootstrap 4 с class="sticky-top" помощью (использование position: fixedв CSS имеет свои проблемы)

код будет примерно таким:

<div class="row">
    <div class="col-lg-3">
        <div class="sticky-top">
            Fixed content
        </div>
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>
</div>
Мохсен Сахрайи
источник
Отлично. position-fixedтакже работал для закрепления столбца наверху, однако содержимое столбца переполнялось. sticky-topисправил это.
maxpaj
11

Обновлено для Bootstrap 4

Bootstrap 4 теперь включает position-fixedкласс для этой цели, поэтому нет необходимости в дополнительном CSS ...

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="position-fixed">
                Fixed content
            </div>
        </div>
        <div class="col-lg-9">
            Normal scrollable content
        </div>
    </div>
</div>

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

Зим
источник
1
Если я сделаю так, как в вашем примере, содержимое столбца «col-lg-3» выйдет за пределы своего родителя. Довольно странно! (Попробуйте добавить сюда больше текста). Это должно быть ошибка ...
ThePhi
1
Это не странно, ведь элементы с фиксированной позицией удаляются из обычного потока DOM . Это выходит за рамки исходного вопроса, но для фиксированного элемента потребуется установить определенный размер.
Zim
2
это приводит к тому, что столбцы перекрывают друг друга
ChumiestBucket
1
В моем случае это было предпочтительнее, так как при определении стиля position: fixed для div col-lg-3 курсоры внутренних дочерних элементов отображались по умолчанию (вместо указателя fx.).
chri3g91
4

Используйте это, у меня работает и решает проблемы с маленьким экраном.

<div class="row">
    <!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
    <div class="col-lg-3 device-lg visible-lg">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
    <!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
    <div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
       <div>
           NO fixed position
        </div>
    </div>
       Normal data enter code here
    </div>
</div>
Удача
источник
2

С bootstrap 4 просто используйте col-auto

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto">
            Fixed content
        </div>
        <div class="col-sm">
            Normal scrollable content
        </div>
    </div>
</div>
Стефаницкий
источник
1
у меня не сработало. обе колонки прокручиваются должным образом.
ChumiestBucket
1
@star_trac попробуйте добавить css, должно помочь:.container-fluid { flex: 1; }
stefanitsky 06