Ustal pozycję kolumny w bootstrapie

Question 1

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

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

Question 3

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>

Question 4

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.

Question 5

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>

Question 6

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

Question 7

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>

Question 8

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>

Answer 1

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

@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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

3

Zdecydowanie teraz preferowane rozwiązanie!

Scott

Answer 6

12

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

thefoxrocks

Answer 7

12

bootstrap 4 ?? jakieś pomysły

PirateApp,

Answer 8

22

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

Tacio Costa

Answer 9

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

Answer 10

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

Answer 11

5

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

didando8a

Answer 12

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

Answer 13

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

Answer 14

7

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

Mike Furlender

Answer 15

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

Answer 16

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.

źródło

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

Answer 17

10

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

ADIMO

Answer 18

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

Answer 19

1

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

Answer 20

@ 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

Answer 21

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

Arpan

Answer 22

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>

Answer 23

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

maxpaj

Answer 24

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

Answer 25

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

Answer 26

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

Answer 27

2

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

ChumiestBucket

Answer 28

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

Answer 29

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>

Answer 30

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

Answer 31

1

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

ChumiestBucket

Answer 32

1

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

stefanitsky

Ustal pozycję kolumny w bootstrapie

Odpowiedzi: