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

Используя Bootstrap, у меня есть столбец сетки class= "col-lg-3", который я хочу поместить в положение: исправлено, в то время как другое .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

Ответ 1

Следуя решению здесь 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 за совместное использование решения.

Ответ 2

<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

повторяя ответ Ihab, просто используя 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>

Ответ 4

в 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>

Ответ 5

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

<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>

Ответ 6

Обновлено для 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

Ответ 7

С начальной загрузкой 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>

Ответ 8

Просто сделайте это:

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

</div>