• 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

0 głosów
36 wizyt
pytanie zadane 13 marca w HTML i CSS przez Śwież4k Obywatel (1,610 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 przez arces Dyskutant (7,620 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 przez Śwież4k Obywatel (1,610 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 przez thryndl Dyskutant (9,420 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 przez Śwież4k Obywatel (1,610 p.)
Dzięki. Ciekawe w sumie. Nie wiedziałem o czymś takim
komentarz 13 marca przez Śwież4k Obywatel (1,610 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 przez Jedras Maniak (54,920 p.)
Jak się uczysz od nowa dla siebie to ucz się lepiej najnowszej wersji. Wszystko, co potrzebne jest w dokumentacji.

Podobne pytania

0 głosów
1 odpowiedź 53 wizyt
0 głosów
1 odpowiedź 41 wizyt
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

50,967 zapytań

93,250 odpowiedzi

189,274 komentarzy

24,849 pasjonatów

Przeglądających: 252
Pasjonatów: 16 Gości: 236

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...