GoldenLine
Zaloguj się
Małgorzata B.

Małgorzata B. ***

Temat: Bootstrap & col-sm-x

Mam pytania odnośnie używania bootstrapa do rozmieszenia danych w kolumnach:

1) Na stronie mam wyświetlić dane w takiej formie jak tutaj:
https://jsfiddle.net/Gt25L/665/

Jak mam otwarte okno przeglądarki na cały ekran to wygląda to dobrze, Dopiero jak zacznę zmniejszać szerokość okna przeglądarki (do ok 1/2) to wszystko wypisuje się w jednej kolumnie (a ponad 3/4 okna przeglądarki jest puste) co jest bardzo nieczytelne.

2) W tym przypadku ma wyświetlić pytania z kodami (jeden pod id pytania i drugi na końcu za texbox-em)

1 Treść pytania...................... textbox kodWew
(kod/
zw)

2 Treść pytania...................... textbox kodWew
(RT)

Tutaj kod:
https://jsfiddle.net/Gt25L/666/

Jak zmniejszę okno przeglądarki to treść, textbox oraz kodWew wyświetlają się jedno pod drugim. Czy da się zrobić tak by przy zmniejszaniu szerokości przeglądarki zmniejszał się też rozmiar col-sm (do pewnego momentu, a potem dodawany był scroll)?Ten post został edytowany przez Autora dnia 02.09.16 o godzinie 22:44
Link do wypowiedziLink
Paweł Knapek

Paweł Knapek freelancer, koder,
wordpressowiec

Temat: Bootstrap & col-sm-x

Tak na szybko, to zamiast col-sm-x możesz użyć col-xs-x.
Dlaczego, to się dowiesz z dokumentacji http://getbootstrap.com/css/#grid
Link do wypowiedziLink
Małgorzata B.

Małgorzata B. ***

Temat: Bootstrap & col-sm-x

Wiem, że z tym działa.
Wg dokumentacji klasa .col-xs- jest dla 'Extra small devices Phones (<768px)'.
Moja aplikacja nie jest na telefon.

Chyba jednak skorzystam z div-ów i flex.Ten post został edytowany przez Autora dnia 05.09.16 o godzinie 21:59
Link do wypowiedziLink

konto usunięte

Temat: Bootstrap & col-sm-x

row powinien być w container, to raz
dwa, zagnieźdź to inaczej - np. na dwie kolumny i w środku rowy

pomyśl w duchu "mobile first", a potem na większe ekrany będzie tylko łatwiej
Link do wypowiedziLink
Paweł Knapek

Paweł Knapek freelancer, koder,
wordpressowiec

Temat: Bootstrap & col-sm-x

Może użyłem zbyt dużego skrótu myślowego.
Tu nie chodzi o urządzenie, tylko o rozdziałkę - te grupy klas różnią się tylko wartościami granicznymi przy których są lub nie łamane (określone w media queries) ...i tylko tyle - bardziej taki charakter porządkowy niż jakiś przymus.
-tak XS zostanie wyświetlony na ekstra wielkim monitorze, jak i LG na smartfonie - różnica miedzy nimi jest tylko taka, że LG ma breckpointa na 1170px i poniżej już zostanie połamany, SM zaś będzie łamany poniżej 750px ...a XS nie ma ustalonego minimum.
Klasy możesz też łączyć - definiować kilka rozmiarówek począwszy od najmniejszej, używać bardziej adekwatnej do potrzeb etc. - patrz załączone wyżej przykłady.

Reasumując, nie ma znaczenia że apka jest na desktopy - skoro ją skalujesz poniżej danej rozdziałki (a przecież to robisz, bo z tego wynika Twój problem), to musisz to uwzględnić i obsłużyć tak jak by była również na ten Twój "telefon".
Jak byś to robiła bez bootstrapa, to musiała byś to samo przecież zrobić, tylko samodzielnie kodując i bawiąc się media queries ( https://developer.mozilla.org/pl/docs/Web/CSS/Media_Que... ).
Tutaj masz to samo przecież, tylko w formie gotowca.
Link do wypowiedziLink
Małgorzata B.

Małgorzata B. ***

Temat: Bootstrap & col-sm-x

Panowie dziękuję za odpowiedzi i wskazówki.

Na chwilę obecną skorzystałam z flex. Jak zmniejszam okno przeglądarki to wszystkie pola są na swoim miejscu. Później 'dodaje się' scroll.
https://jsfiddle.net/xk6jdncs/8/Ten post został edytowany przez Autora dnia 07.09.16 o godzinie 20:02
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Bootstrap carousel - proble...




Wyślij zaproszenie do
Anuluj