Problem z kolumnami i marginesami Bootstrap

Question

Cześć, tworzę obecnie szablon Bootstrap i mam pewien problem. 
W jednym row mam 3 kolumny każda o szerokości col-md-4 i chciałbym żeby były one w jednym rzędzie. Jednak pomiędzy tymi kolumnam musi być odstęp 2-3px jednak gdy to zrobię to jedna kolumna przeskakuje o poziom niżej, jak temu zaradzić ?

Answer 1

O coś takiego chodzi?

https://jsfiddle.net/6qxug59m/

Comments

http://free.avg.com/pl-pl/homepage coś takiego

---

Oni nie mają tam marginesów tylko bordery, border-right i border-top 1px solid #fff

Answer 2

Ja bym to rozwiązał w ten sposób: https://jsfiddle.net/Czeran/86wbdqpm/

Małe wytłumaczenie:

Domyślnie w jednym elemencie z klasą "row", mieści się 12 kolumn. Dodanie 3 elementów "col-md-4" w jednym "row" rozciąga te 3 kolumny na maksymalną szerokość elementu "row". Każde dodanie marginesów do elementu "col-md-4" powoduje przekroczenie maksymalnej szerokości i ostatni element ląduje linijkę niżej. Dodanie borderów nie powoduje przejścia ostatniego elementu niżej, ponieważ border wyświetlany jest "w środku" elementu - czyli nie powiększa szerokości samego elementu. Rozwiązanie fajne, aczkolwiek gdy masz nietypowe tło (inne niż jednolite), twoje odstępy nie będą wyglądały najlepiej. Moje rozwiązanie polega na dodanie wewnętrznego kontenera i dodania mu marginesu tak żeby utworzyła się przerwa w miejscu w którym nam się podoba, a elementowi "col-md-4" zerujemy padding oraz margin i ustawiamy tło na przezroczyste. Dodatkowo dodałem opcję "@media" by usunąć te marginesy, gdy strona zacznie się "składać". Dla kolumn "sm" jest to wartość 750px. Dla innych kolumn szerokość ekranu, w których elementy zaczynają przechodzić na dół możesz znaleźć na oficjalnej stronie bootstrapa (http://getbootstrap.com/css/#grid-options).

Mam nadzieję że pomogę ;)

Comments

Rozwiązanie fajne, aczkolwiek gdy masz nietypowe tło (inne niż jednolite)

A jakby dać przezroczysty border?

 

---

Dodanie borderów nie powoduje przejścia ostatniego elementu niżej, ponieważ border wyświetlany jest "w środku" elementu - czyli nie powiększa szerokości samego elementu.

Nie - w bootstrapie nie zwiększa się rozmiar elementu po dodaniu borderu ponieważ zastosowano: box-sizing:border-box.

---

Jako że bordery wyświetlają się wewnątrz elementu, przezroczyste ramki nic nie dadzą.

---

@cz3ran Widziałeś kiedykolwiek model pudełkowy? - Od kiedy obramowanie jest wewnątrz elementu ? :)

---

Jako że bordery wyświetlają się wewnątrz elementu, przezroczyste ramki nic nie dadzą.

Chyba, że dodasz wewnetrzny element https://jsfiddle.net/86wbdqpm/1/

Answer 3

http://codepen.io/kkondratowicz/pen/EyyKga