Question

Jak zrobić border dostosywujący sie do contentu diva bez psucia reponsywnosci strony?

Chodzi o to że jakby div ma swój własny "padding" mimo jego wyzerowania w css

Zawsze z tym problem radziłem sobie dodając 

display: inline-block;

ale teraz to nie działa (a jak działa to psuje sie cały układ strony) bo używam bootstrapa

Istnieje inny sposób ja dostosowanie bordera do contentu?

pomocy

 

 

https://codepen.io/igor-zbala/pen/gOwYgpp

tu jest na code pen

TyLkO tam jest php wiec codePen to zle wyswietla ale jest tam cały kod :D

Comments

(pls wbij bo na bank wiesz)

Proszę zapoznaj się z regulaminem forum. Pytanie powinno możliwie zwięźle i szczegółowo opisywać problem, aby ułatwić znalezienie jego przyczyny i udzielić ewentualnej pomocy. Dopisek w tytule w powyższym stylu jest niepotrzebny - może nawet zniechęcić potencjalnych chętnych do pomocy.

Podaj proszę więcej kodu (a najlepiej udostępnij testowalne demo np. na CodePen lub JSFiddle), ponieważ powyższy opis zbyt ogólnie opisuje problem.

---

https://codepen.io/igor-zbala/pen/gOwYgpp

tu jest na code pen

TyLkO tam jest php wiec codePen to zle wyswietla ale jest tam cały kod :D

---

i chodzi mi o to że jak jest np link

Zaloguj się

to ja moge kursorem najechać normalnie 200px obok - i to mi załapie że na to wjechałem - a ja bym chciał żeby "zalapywało" gdy w jade ten tekst

Answer 1

Linki "Zaloguj się" i "Zarejestruj się", za sprawą Bootstrap'owej klasy col-sm-6, mają po połowie szerokości rodzica, przez to najechanie na nie aktywuje :hover dla całego elementu, a nie tylko przestrzeni, gdzie jest tekst. Możesz umieścić te linki w span'ach i przenieść klasę log (ona obsługuje :hover) na linki.

<span class="col-sm-6">
  <a class="log" href="zaloguj">Zaloguj się</a>
</span>

<span class="col-sm-6">
  <a class="log" href="rejestracja">Zarejestruj się</a>
</span>

 

Comments

nom niby działa ale sie psuje xD: 

---

Porównaj sobie swój obecny kod z tym: https://codepen.io/ScriptyChris/pen/YzGKvgB

---

nw co wcześniej zrobilem źle ale już działa , dzk

Ale jak przy linkach działa to jak zrobić przy tym motto  i niceowe rzeczy? też je zamknąć w spanach?

---

Tam jest analogiczny problem: element jest ostylowany tak, że zajmuje 100% szerokości parenta, więc :hover łapie cały element. Więc tak, zamknięcie tego elementu w <span> (lub np. <p> - zależy jaki chcesz mieć layout menu) sprawi, że to on będzie miał 100% szerokości, a link w środku będzie szeroki na tyle na ile jego zawartość (dopóki będzie elementem liniowym).

---

Polecam używać inspektora elementów (w Twoim przypadku do przeglądania styli), bo to bardzo ułatwia pracę w trakcie tworzenia strony i szukania ewentualnych problemów: https://developers.google.com/web/tools/chrome-devtools/css

---

Dobra dzięki, przynajmniej już rozumiem i będę umiał w przyszłości rozwiązać ten problem