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

Problem z sidebarem dla urządzeń mobilnych - Bootstrap

VPS Starter Arubacloud
0 głosów
166 wizyt
pytanie zadane 13 marca 2018 w HTML i CSS przez Śwież4k Bywalec (2,570 p.)

Witam, mam problem, ponieważ slidebar nie rozszerza się na cały ekran dla telefonów, a dodałem klasę "col-xs-12". Wie może ktoś, co może być nie tak? Pozdrawiam i dziękuję za każdą odpowiedź.

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="r03.css" type="text/css">
</head>
<body>
    <div class="container">
      <div class="row">
        <label for="nav-switch" class="visible-xs-block "></label>
        <input type="checkbox" id="nav-switch" class="nav-switch visible-xs-block">
      </input>
        <div class="col-sm-3 col-xs-12 col-left">
          <ul class="list-group">
            <li class="list-group-item disabled">Dodaj nowe zadania<span class="badge">1</span></li>
            <li class="list-group-item list-group-item-info"><a href="index.html"> Pokaż wszystkie zadania<span class="badge badge-light">222</span></a></li>
            <li class="list-group-item list-group-item-dark">Pokaż niewykonane zadania<span class="badge">1</span></li>
            <li class="list-group-item">Zadania w tym miesiącu<span class="badge">1</span></li>
            <li class="list-group-item">
							<a href="index.html">
								<h4 class="list-group-item-heading">Zadania w tym kwartale</h4>
								<p class="list-group-item-text">Wyświetl zadania zaplanowane do wykonania w obecnym kwartale</p>
							</a>
						</li>
          </ul>
        </div>
        <div class="col-sm-5 col-xs-12 col-center">
          <div class="row">
            <div class="col-xs-12"></div>
            <div class="col-xs-12"></div>
          </div>
        </div>
        <div class="col-sm-4 col-xs-12 col-right">
          <div class="row">
            <div class="col-xs-12"></div>
            <div class="col-xs-12">
              <div class="row">
              <div class="col-md-6 col-xs-12"></div>
              <div class="col-md-6  col-xs-12"></div>
              <div class="col-md-6  col-xs-12"></div>
              <div class="col-md-6  col-xs-12"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
.visuallyhidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
}
#nav-switch {
  padding: 10px;
  display: none;
}

@media (max-width: 767px) {
	.col-left {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 60px;
		right: 0;
		bottom: 0;
		left: -100%;
		z-index: 1;
		transition: 0.2s;
	}
#nav-switch {
  padding: 10px;
  display: block;
}
	.nav-switch {
		width: 0;
		height: 0;
	}
	.nav-switch:before {
		display: block;
		content: 'M';
		position: fixed;
		top: 15px;

		left: 15px;
		text-align: center;
		z-index: 2;
		font-size: 2em;
		background: #eee;
		color: #aaa;
		border-radius: 2px;
		line-height: 1.1em;
		width: 30px;
		height: 30px;
		cursor: pointer;

	}
	.nav-switch:checked + .col-left {
		left: 0;
		transition: 0.2s;
	}

}

 

2 odpowiedzi

0 głosów
odpowiedź 13 marca 2018 przez arces Pasjonat (17,700 p.)
Korzystasz z Bootstrapa wersji 4.0, tam już nie ma "col-xs". Poczytaj dokumentację zanim zaczniesz używać nowej wersji BS.

Tutaj masz część odnośnie gridu:

http://getbootstrap.com/docs/4.0/layout/grid/
komentarz 13 marca 2018 przez Śwież4k Bywalec (2,570 p.)
Generalnie to chyba używałem jakiegoś lewego linku to trzeciej wersji, która nie powodowała żadnych zmian między 3 a 4 wersją. W każdym razie po zmianie na wersję 3 (już działa), wciśnięciu zbadaj w przeglądarce i uruchomieniu strony na urządzeniu mobilnym dalej nie funkcjonuje to taki jak powinno, czyli, że slidebar się nie ukrywa.
0 głosów
odpowiedź 13 marca 2018 przez thryndl Nałogowiec (30,470 p.)

Brak meta tagu viewport w sekcji <head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

To podstawa, żeby w pełni obsługiwać responsywność.

komentarz 13 marca 2018 przez Śwież4k Bywalec (2,570 p.)
Dzięki. Ciekawe w sumie. Nie wiedziałem o czymś takim
komentarz 13 marca 2018 przez Śwież4k Bywalec (2,570 p.)

@thryndl, Kupiłem książkę do bt 3 i się zastanawiam, czy ją kończyć, czy raczej za bt 4 się wziąć

 

komentarz 13 marca 2018 przez Jedras Maniak (54,860 p.)
Jak się uczysz od nowa dla siebie to ucz się lepiej najnowszej wersji. Wszystko, co potrzebne jest w dokumentacji.

Podobne pytania

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...