Nowy w bootstrapie 3 ... W moim układzie mam:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6">
<div class="pull-right">
elements 2
</div>
</div>
</div>
Chciałbym, aby „elementy 2” NIE były wyrównane dokładnie na ekranach mniejszych niż col-lg. Tak efektywnie mając klasę pull-right tylko dla col-lg-6 ...
Jak mogłem to osiągnąć?
Oto skrzypce: http://jsfiddle.net/thibs/Y6WPz/
Dziękuję Ci
order-lg-1
,order-lg-2
itp. Na swoich kolumnach.Odpowiedzi:
Możesz umieścić „element 2” w mniejszej kolumnie (np .:),
col-2
a następnie używać tylkopush
na większych ekranach:Demo: http://bootply.com/88095
Inną opcją jest nadpisanie wartości zmiennoprzecinkowej
.pull-right
przy użyciu zapytania @media.Wreszcie inną opcją jest utworzenie własnej
.pull-right-lg
klasy CSS.AKTUALIZACJA
Bootstrap 4 zawiera responsywne pływaki , więc w tym przypadku po prostu użyjesz
float-lg-right
.Nie jest potrzebny żaden dodatkowy kod CSS .
Demo Bootstrap 4
źródło
Wypróbuj ten MNIEJSZY fragment kodu (został utworzony na podstawie powyższych przykładów i mieszanych zapytań o media w grid.less).
źródło
źródło
Nie ma potrzeby tworzenia własnej klasy z zapytaniami o media. Bootstrap 3 ma już porządek zmiennoprzecinkowy dla punktów przerwania multimediów w ramach kolejności kolumn: http://getbootstrap.com/css/#grid-column-ordering
Składnia klasy to
col-<#grid-size>-(push|pull)-<#cols>
gdzie<#grid-size>
jest xs, sm, md lub lg i<#cols>
określa, jak daleko kolumna ma się przesunąć dla tego rozmiaru siatki. Pchanie lub ciągnięcie jest oczywiście w lewo lub w prawo.Używam go cały czas, więc wiem, że działa dobrze.
źródło
Działa również dobrze:
źródło
Dodanie CSS pokazanego poniżej do aplikacji Bootstrap 3 umożliwia obsługę
zajęcia, które działają dokładnie tak, jak nowe
klasy, które zostały wprowadzone w Bootstrap 4:
Poza tym dodaje
dla kompletności, będąc kompatybilnym z
z Bootstrap 4.
źródło
Dla zainteresowanych wyrównaniem tekstu prostym rozwiązaniem jest utworzenie nowej klasy:
Następnie dodaj tę klasę:
źródło
Korzystanie z Sass jest bardzo proste, wystarczy użyć
@extend
:źródło
To jest to, czego używam. zmień @ screen-md-max na inne rozmiary
źródło
Ten problem został rozwiązany w bootstrap-4-alpha-2.
Oto link: http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/
Sklonuj go na github: https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2
źródło
Po prostu użyj responsywnych klas narzędzi bootstrap!
Najlepszym rozwiązaniem do tego zadania jest użycie następującego kodu:
Element zostanie wyrównany do prawej strony tylko na
lg
ekranach - na pozostałychdisplay
atrybut zostanie ustawionyblock
tak, jak domyślnie dladiv
elementu. To podejście polega na użyciutext-right
klasy w elemencie nadrzędnym zamiastpull-right
.Alternatywne rozwiązanie:
Największą wadą jest to, że kod HTML wewnątrz musi zostać powtórzony dwukrotnie.
źródło
Możesz użyć poleceń push i pull, aby zmienić kolejność kolumn. Ciągniesz jedną kolumnę, a drugą popychasz na dużych urządzeniach:
źródło
teraz zawiera bootstrap 4:
a kod powinien wyglądać następująco:
źródło