Pytania otagowane jako responsive-design

Obecnie mam coś takiego: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> Zakładając, że contentbyły to pudełka o różnej wysokości i tej samej szerokości - jak mógłbym zachować ten sam „układ oparty na siatce”, a jednocześnie mieć …

88 html  css  twitter-bootstrap  responsive-design  bootstrap-4 

Od wersji Bootstrap 3 nie ma już oddzielnych plików dla responsywnych i standardowych arkuszy stylów. Jak więc mogę łatwo usunąć responsywne funkcje?

85 twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 

Ściągnąłem przykład Twittera Bootstrap i stworzyłem z nim prosty projekt railsowy. Skopiowałem css w razie potrzeby i wyświetla się dobrze. Skopiowałem też js i wszystko działa świetnie na moim komputerze: reorganizuje stronę, gdy zmieniam rozmiar mojej przeglądarki. W przypadku korzystania z niektórych „responsywnych narzędzi do testowania projektów” o różnych rozmiarach …

84 twitter-bootstrap  responsive-design 

Za pomocą zapytań o media CSS można max-device-widthkierować reklamy na szerokość urządzenia (np. IPhone lub Android) i / lub na max-widthszerokość strony. Jeśli używasz max-device-width, kiedy zmienisz rozmiar okna przeglądarki na pulpicie, CSS się nie zmieni, ponieważ twój pulpit nie zmienia rozmiaru. Jeśli używasz max-width, po zmianie rozmiaru okna przeglądarki …

82 css  responsive-design  media-queries 

Byłoby dobrze opakować style css dla różnych rozdzielczości w ramach niektórych klas css, używając less. Chciałbym zrobić coś takiego: footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } Na koniec powinno być coś takiego: footer { width: 100%; …

82 css  responsive-design  less  media-queries 

Ostatnio projektuję witryny, które są bardziej responsywne i często korzystam z zapytań o media CSS. Zauważyłem, że kolejność definiowania zapytań o media ma znaczenie. Nie testowałem tego w każdej przeglądarce, ale tylko w Chrome. Czy istnieje wytłumaczenie tego zachowania? Czasami jest to frustrujące, gdy witryna nie działa tak, jak powinna …

80 css  media-queries  responsive-design 

Jak sprawić, by iframe reagował bez zakładania współczynnika proporcji? Na przykład treść może mieć dowolną szerokość lub wysokość, która jest nieznana przed renderowaniem. Uwaga: możesz używać Javascript. Przykład: <div id="iframe-container"> <iframe/> </div> Zmień to iframe-containertak, aby jego zawartość ledwo mieściła się w środku bez dodatkowej przestrzeni, innymi słowy, jest wystarczająco …

14 javascript  html  css  iframe  responsive-design 

Mam poważne problemy z uzyskaniem zawartości paska bocznego / nawigacji (za pomocą Bootstrap), aby domyślnie wyświetlać (być rozwijana) na komputerze i domyślnie zamykać na urządzeniach mobilnych, a ikona wyświetla się tylko na urządzeniach mobilnych. Nie mogę tego zrobić. <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" …

9 javascript  html  css  bootstrap-4  responsive-design