• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Bootstrap - rozłożenie elementów

VPS Starter Arubacloud
0 głosów
197 wizyt
pytanie zadane 12 sierpnia 2019 w HTML i CSS przez kingkushlee Gaduła (3,960 p.)
zamknięte 12 sierpnia 2019 przez kingkushlee

Witam, jak mógłbym uzyskać takie. jak tutaj: https://ibb.co/dMJsfWz rozłożenie kafelków w bootstrapie. Dodam, że te minimalne odstępy są istotne, a długość containera musi wynosić 1600px.

Z góry dzięki za pomoc.

komentarz zamknięcia: Rozwiązano

1 odpowiedź

0 głosów
odpowiedź 12 sierpnia 2019 przez lateM Pasjonat (17,660 p.)
wybrane 12 sierpnia 2019 przez kingkushlee
 
Najlepsza

Po co chcesz ustawiać na sztywno długość elementu? Co z urządzeniami mobilnymi? Ale jak chcesz, to proszę: Dodaj containerowi klasę np. "gallery" i ustaw mu width: 1600px.

HTML

<div class="container gallery">
<div class="row">

<div class="col-xl-3 gallery__item">
 Pojedyncza komórka 1
</div>

<div class="col-xl-3 gallery__item">
 Pojedyncza komórka 2
</div>

<div class="col-xl-3 gallery__item">
 Pojedyncza komórka 3 (i tak dalej - tyle ile potrzebujesz)
</div>

</div>
</div>

CSS

.gallery{
width: 1600px;
}

.gallery__item{
padding: 0.5rem;
}

 

komentarz 12 sierpnia 2019 przez kingkushlee Gaduła (3,960 p.)
Dzięki :D Co do urządzeń mobilnych to zrobiłem adnotacje @media. Co do odstępów to nie chodzi mi o padding, tylko o odstępy zrobione w taki sposób, żeby elementy nie przechodziły do następnej linii. Jak to naprawić?

https://ibb.co/FsP3b8S (tego czarnego nie ma na stronie, to tylko efekt screena)
komentarz 12 sierpnia 2019 przez lateM Pasjonat (17,660 p.)
Chyba nie zrozumiałem... kod, który podałem sprawia, że powyżej 1200px szerokości będziesz miał 4 elementy obok siebie. Jeśli będziesz miał 8 elementów, to 4 w jednym rzędzie i 4 w kolejnym. Możesz też wrzucić do jednego "row" 4 elementy i obok niego dodać kolejny "row" z pozostałymi czterema. Jeśli to nadal nie to - to rozrysuj mi to lepiej, bo nie czaję.
komentarz 12 sierpnia 2019 przez kingkushlee Gaduła (3,960 p.)
Chodzi mi o te delikatne odstępy, bo teraz wszystkie kolumny się zlewają ze sobą, czyli nie ma tego odstępu. Dodanie paddingu nie zadziałało, bo padding to odstęp wewnątrz diva, a ja chciałbym dodać delikatne marginesy. Jednak po dodaniu marginesów w "normalny" sposób tj margin, margin-left itp jeden element przeskakuje do kolejnej linii.
komentarz 12 sierpnia 2019 przez lateM Pasjonat (17,660 p.)
Wewnątrz elementów z "col" dodaj kolejne divy z klasą "gallery__item" i to im nadaj margin. Dodawanie marginu dla elementów "col" burzy siatkę i elementy się nie mieszczą. To chyba najlepszy sposób...
komentarz 12 sierpnia 2019 przez kingkushlee Gaduła (3,960 p.)
DZIĘKI :D

Podobne pytania

0 głosów
1 odpowiedź 193 wizyt
pytanie zadane 14 października 2019 w HTML i CSS przez kingkushlee Gaduła (3,960 p.)
0 głosów
0 odpowiedzi 186 wizyt
pytanie zadane 28 grudnia 2022 w HTML i CSS przez AnimaVillis Stary wyjadacz (11,190 p.)
0 głosów
1 odpowiedź 503 wizyt
pytanie zadane 5 marca 2017 w HTML i CSS przez SandraS Obywatel (1,400 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...