I 'm testowania Twitter Bootstrap i utknęła z podstawowym rusztowaniem z wierszy. Wielokrotnie wracałem do ich dokumentacji i widzę zagnieżdżone kolumny, w których można w zasadzie zagnieżdżać kolumny w kolumnie, ale nie mogę znaleźć możliwości łączenia wierszy w jeden i wyrównania go z kolumną obok niepołączonych wierszy.
Poniższe zdjęcie powinno ilustrować to, co chcę osiągnąć.
Jedynym rozwiązaniem obejścia problemu, z jakim się spotkałem, jest użycie tabel, ale nie podoba mi się ten pomysł, ponieważ moim zdaniem responsywność nie działałaby przy użyciu tabel.
Czy ktoś ma na to jakieś eleganckie rozwiązanie? Większość układu strony internetowej, którą wykonuję, będzie wymagała wysokiego poziomu elastyczności, więc byłoby wspaniale, gdybym mógł wybrać tutaj coś przydatnego.
źródło
1row=25px
,2row=50px
. czy możesz sprawić, by łączony element div był tak wysoki, jak cały wiersz? próbował dodać,.row{height:100%;}
ale nie udało się.Powinieneś użyć zagnieżdżania kolumn bootstrap.
Zobacz Bootstrap 3 lub Bootstrap 4 :
http://jsfiddle.net/DRanJ/125/
(Na ekranie Fiddle powiększ ekran testu, aby zobaczyć wynik, ponieważ używam col- md - *, a następnie responsywne kolumny stosów)
Uwaga : Nie jestem pewien, czy BS2 zezwala na zagnieżdżanie kolumn , ale w odpowiedzi Paula Keistera zagnieżdżanie kolumn nie jest używane. Powinieneś go używać i unikać ponownego projektowania css, podczas gdy bootstrap działa dobrze.
Wysokość kolumn jest automatyczna, jeśli dodasz drugą linię (tak jak w moim przykładzie), wysokość kolumny dostosuje się.
źródło
-md-
reguła responsywna. Aby zobaczyć oczekiwany rezultat, musisz powiększyć ekran. Jeśli chcesz, aby rozpiętości były wyświetlane jako kolumny na mniejszych ekranach, zamień-md-
na-sm-
lub-xs-
. To jest pytanie dotyczące punktu przerwania (patrz bootstrapdocs.com/v3.0.3/docs/css/#grid ).Uwaga: dotyczyło Bootstrap 2 (istotne, gdy zadano pytanie).
Możesz to osiągnąć, używając
row-fluid
do utworzenia wiersza opartego na płynie (procentach) wewnątrz istniejącegoblock
.Oto przykład JSFiddle .
Zauważyłem, że wystąpił dziwny lewy margines, który pojawia się (lub nie pojawia się) dla przęseł wewnątrz
row-fluid
pierwszego. Można to naprawić za pomocą niewielkiej poprawki CSS (jest to ten sam CSS, który jest stosowany do pierwszego dziecka, rozszerzony na te za pierwszym dzieckiem):źródło
row-fluid
kiedy nadejdzie czas, aby zacząć dzielić wewnętrzne rzędy.Sprawdź ten. mam nadzieję, że to pomoże ci w pełni.
http://jsfiddle.net/j6amM/
źródło
Wydaje się, że odpowiedź Paula podważa cel bootstrapu; to reagowanie na rozmiar obszaru roboczego / ekranu.
Zagnieżdżając wiersze i kolumny, możesz osiągnąć ten sam wynik, zachowując jednocześnie responsywność.
Oto aktualna odpowiedź na ten problem;
Możesz wyświetlić kodepen tutaj.
źródło
źródło