• 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

Geoinformatyka UKSW Warszawa rekrutacja
0 głosów
41 wizyt
pytanie zadane 13 marca w HTML i CSS przez Śwież4k Obywatel (1,930 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 (8,160 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,930 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 Pasjonat (17,690 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,930 p.)
Dzięki. Ciekawe w sumie. Nie wiedziałem o czymś takim
komentarz 13 marca przez Śwież4k Obywatel (1,930 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ź 55 wizyt
0 głosów
1 odpowiedź 65 wizyt
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

54,236 zapytań

97,998 odpowiedzi

201,481 komentarzy

26,616 pasjonatów

Przeglądających: 239
Pasjonatów: 16 Gości: 223

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.

...