Ustal pozycję kolumny w bootstrapie

83

Używając Bootstrap, mam klasę kolumny siatki = "col-lg-3", którą chcę umieścić na miejscu: ustalona, podczas gdy druga .col-lg-9 jest normalną pozycją (można przewijać stronę).

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

</div>

Tak samo jak lewa kolumna w LifeHacker.com Zobaczysz, że lewa część jest naprawiona, ale przewijam stronę.

Używam bootstrap 3.1.1

css twitter-bootstrap twitter-bootstrap-3

@Lowkase Załączam kod na żądanie.

1

Oczekiwanie na wyjęcie tematu „wstrzymane”. W międzyczasie możesz zobaczyć moją odpowiedź tutaj: jsfiddle.net/dRbe4 . Mogę to lepiej wyjaśnić, gdy pytanie zostanie ponownie otwarte.

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

— Naga prasanna
źródło

3

Zdecydowanie teraz preferowane rozwiązanie!

— Scott

12

To nie działa poprawnie na mniejszych ekranach, prawy element div zostanie umieszczony nad lewym kolumną zawierającą element fixeddiv

— thefoxrocks

12

bootstrap 4 ?? jakieś pomysły

— PirateApp,

22

W Bootstrap 4 zmień „affix” na „sticky-top”

— Tacio Costa

3

Dla informacji: Bootstrap zrezygnował z obsługi afiksu w Bootstrap 4.0. Użyj teraz „position: sticky” zgodnie z sugestią tutaj: getbootstrap.com/docs/4.1/migration/#components

— Antoine Delia

50

iterując po odpowiedzi Ihab, używając tylko position:fixedi bootstrapów col-offset, nie musisz być konkretny co do szerokości.

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

— Pablo Fernandez
źródło

5

to nie działa, jeśli zmienisz położenie kolumn

— didando8a

To lepsze rozwiązanie! działa idealnie i nie jest potrzebny CSS. @ didando8a Jeśli zmienisz pozycję kolumn, po prostu zmień col-lg-offset na nowy offset.

— Roy Shoa

Jeśli ktoś potrzebuje również możliwości przewijania do stałej kolumny, wystarczy dodać wysokość i przepełnienie. np style="position:fixed;height:100%;overflow-y:auto;".

— Roy Shoa

7

@Roy "Żaden CSS nie jest potrzebny" - tak, jest tylko w tagu stylu;)

— Mike Furlender

4

To jest to, czego potrzebowałem! Zauważ, że klasy przesunięcia są różne w Bootstrap 4, np offset-lg-3. getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

— nickwesselman

29

Postępując zgodnie z rozwiązaniem tutaj 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>

Zmodyfikowałem niektóre css, aby działały idealnie:

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

Dzięki @Lowkase za udostępnienie rozwiązania.

10

Czy można uzyskać ten sam wynik bez określenia atrybutu szerokości?

— ADIMO

1

Zdaję sobie sprawę, że to powinno być boleśnie oczywiste, ale nie mogę tego uruchomić ... Chcę przewijać kolumnę po lewej i nieruchomą kolumnę po prawej. Moja stała kolumna ma tylko etykietę, ale z jakiegoś powodu, kiedy ustawiam te klasy, etykieta „przykleja się” do lewego górnego rogu zamiast znajdować się w kolumnie. Bezskutecznie próbowałem różnych kombinacji atrybutów stylu. Doceniłby wskaźnik :)

— Reid

1

@ReidBelton udostępnij Jsfiddle, abym mógł Ci pomóc z kodem.

@ IhabAbdel-Rahim Bardzo dziękuję za ofertę! Nie jest to jednak konieczne, ponieważ od tego czasu odłożyłem ten projekt na półkę.

— Reid

zrobiłem to samo, ale kiedy dodam stałą klasę, zniknęła. Proszę pomóż.

— Arpan

21

w Bootstrap 3 class="affix"działa, ale w Bootstrap 4 nie. Rozwiązałem ten problem w Bootstrap 4 z class="sticky-top" (używanie position: fixedw CSS ma swoje własne problemy)

kod będzie wyglądał mniej więcej tak:

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

— Mohsen Sahrayi
źródło

Doskonały. position-fixedpracował również nad przyklejeniem kolumny do góry, jednak zawartość kolumny przelewała się. sticky-topnaprawiłem to.

— maxpaj

11

Zaktualizowano dla Bootstrap 4

Bootstrap 4 zawiera teraz position-fixedklasę do tego celu, więc nie ma potrzeby stosowania dodatkowego 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

— Zim
źródło

1

Jeśli zrobię tak, jak w twoim przykładzie, zawartość kolumny „col-lg-3” zostanie usunięta z kolumny macierzystej. Trochę dziwne! (Spróbuj umieścić w tym więcej tekstu). To musi być błąd ...

— ThePhi

1

Nie jest to dziwne, ponieważ elementy o ustalonej pozycji są usuwane z normalnego przepływu DOM . To wykracza poza zakres pierwotnego pytania, ale musiałoby ustawić określony rozmiar dla stałego elementu.

— Zim

2

powoduje to jednak, że kolumny nakładają się na siebie

— ChumiestBucket

1

W moim przypadku było to preferowane, ponieważ zdefiniowanie pozycji: fixed styling do col-lg-3 div spowodowało, że kursory wewnętrznych elementów potomnych były wyświetlane jako domyślne (zamiast fx. Pointer).

— chri3g91

4

Użyj tego, działa dla mnie i rozwiązuj problemy z małym ekranem.

<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
źródło

2

Z bootstrapem 4 po prostu użyj 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>

— Stefanitsky
źródło

1

nie działa dla mnie. obie kolumny przewijają się zgodnie z oczekiwaniami.

— ChumiestBucket

1

@star_trac spróbuj dodać trochę css, powinno pomóc:.container-fluid { flex: 1; }

— stefanitsky