Зробіть фіксовану позицію стовпця в завантажувальному ремінці

83

Використовуючи 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

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 змініть "афікс" на "sticky-top"

— Tacio Costa

3

Довідково: Bootstrap відмовився від підтримки афікса з Bootstrap 4.0. Використовуйте "position: sticky" зараз, як пропонується тут: getbootstrap.com/docs/4.1/migration/#components

— Антуан Делія

50

перебираючи відповідь Іхаба, просто використовуючи position:fixedта завантажувальні стріпки, 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" - так, це просто, він просто в тезі стилю;)

— Mike Furlender

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

Чи можна отримати однаковий результат без вказівки атрибута width?

— 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 . Це виходить за межі початкового питання, але для встановленого елемента потрібно встановити певний розмір.

— Зім

2

це призводить до того, що стовпці, проте, перекривають один одного

— ChumiestBucket

1

У моєму випадку це було переважно, оскільки визначення позиції: фіксований стиль до div 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>

— Lucke
джерело

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