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

Problem z reponsywnością (zajmowanie przez footer-a jedynie 1/12 jego szerokości).

VPS Starter Arubacloud
0 głosów
86 wizyt
pytanie zadane 6 listopada 2020 w JavaScript przez Hubertius Bywalec (2,970 p.)

Cześć :)

Jestem na etapie stosowania bootstrapa do stopki mojej strony.

Mój kod hmtl:

<footer class = "container-fluid main_footer">
  <div class = "row">
    <div class = "col-4 main_footer-div">
      <p>Copyright: PoElektro 2020. Wszystkie prawa zastrzeżone.</p>
    </div>
    <div class = "col-3"></div>
    <nav class = "col-5 main_nav">
      <div class = "row">
          <ul class = "col-12 footer-list">
            <div class = "row">
                <li class = "col-5 footer-list-element">
                    <a href="#">Wsparcie</a>
                </li>
                <li class = "col-7 footer-list-element">
                    <a href="#">Warunki użytkowania</a>
                </li>
            </div>
          </ul>
      </div>
    </nav>
  </div>
</footer>

I CSS odnoszący się bezpośrednio do mojej stopki:

footer{
  position: fixed;
  width: 100%;
  bottom: 0px;
  height: 10%;
  left:0px;
  padding: 10px;
  background-color:#00BFFF;
  z-index: 1;
}
.main_footer > div{
  display:inline-block;
  vertical-align: middle;
}
.main_nav{
  display: inline-block;
  text-align: right;
  width: calc(100% - 52%);
  vertical-align: middle;
}
.footer-list{
  display: inline-block;
  list-style: none;
  text-align: right;
}
.main_footer-div{
  @media screen and (min-width: 768px) {
      font-size: 5px;
  }
}
.footer-list-element{
  padding: 20px;
  display: inline-block;
}
.footer-list-element a{
  text-decoration: none;
  color: black;
}
.footer-list-element a:hover,
.footer-list-element a:active{
  background-color:red;
  color: white;
  font-weight: bold;
  border: 10px solid red;
  border-radius: 8px;
}

Problem po zastosowaniu responsywności wystąpił taki, że pierwszy <div> i drugi <nav> znajdują się w pierwszych 1/12 strony, a ponadto nie obok siebie, a pod sobą. Ten drugi problem mogę rozwiązać zmniejszając czcionkę paragrafu z pierwszego div-a, ale jak poradzić sobie z pierwszym? Z góry dziękuję za odpowiedzi. :)

2 odpowiedzi

0 głosów
odpowiedź 6 listopada 2020 przez Wiciorny Ekspert (269,120 p.)
edycja 6 listopada 2020 przez Wiciorny

.main_footer > div{

  display:inline-block;

  vertical-align: middle;

}

wiesz co się dzieje w tej syruacji ?   - div będący jedynie bezpośrednim dzieckiem main_footer dostanie takie własciwości 

 

<div class="col-3"></div>

ten div nie ma np właściwości, stąd nie reaguje na wyświetlenie blokowe z innymi "inline" 

<div class = "col-4 main_footer-div">
      <p>Copyright: PoElektro 2020. Wszystkie prawa zastrzeżone.</p>
    </div>
    <div class = "col-3"></div>
    <nav class = "col-5 main_nav">
      <div class = "row">
          <ul class = "col-12 footer-list">
            <div class = "row">
                <li class = "col-5 footer-list-element">
                    <a href="#">Wsparcie</a>
                </li>
                <li class = "col-7 footer-list-element">
                    <a href="#">Warunki użytkowania</a>
                </li>
            </div>
          </ul>
      </div>
    </nav>

tak samo divy wewnętrzne tez nie będa "inline" 

0 głosów
odpowiedź 6 listopada 2020 przez pablop76 VIP (123,060 p.)

Prawdopodobnie ustawienie tego nie wymaga dodatkowego css, wystarczą klasy bt.

.main_footer > div{
  width: 100%;
  display:inline-block;
  vertical-align: middle;
}

To jest błąd. W ten sposób dodajesz style dla .row, i zaburzasz całą siatkę.

  width: calc(100% - 52%);

To moim zdaniem również, bo to jest to samo co width: 48% :) Poza tym masz tam już klasę col-5, więc po co?

Podobne pytania

0 głosów
1 odpowiedź 925 wizyt
0 głosów
2 odpowiedzi 270 wizyt
pytanie zadane 19 września 2016 w HTML i CSS przez MaciekM Użytkownik (990 p.)

92,453 zapytań

141,262 odpowiedzi

319,087 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!

...