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

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