[Bootstrap] Dwie osobne listy dla dwóch różnych rozdzielczości Opcje

[tzm]

Spotkał się ktoś z czymś takim?

Powiedzmy że chciałbym ukryć .navbar-left w rozdzielczości @media(min-width:1060px) a .navbar-right w @media(min-width:768px), nie razem, osobno?

Było by miło za jakiś przykład jak kojarzycie, poziom angielskiego mnie weryfikuje w poszukiwaniach

[Pyton_000]

ustalasz dodatkowo max-width i tyle

[tzm]

[HTML] pobierz, plaintext 
body {
  padding-bottom: 20px;
  overflow:hidden;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  background:grey;
}
 
.navbar {
  margin-bottom: 20px;
}
@media (max-width: 1040px) {
    .navbar-header {
        float: none;
    }
    .navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
}
@media (max-width: 768px) {
	.navbar-left {
			float: none !important;
		}
}
.tattool-navbar{
	background:black;
	border:none;
	color:white;
	height:50px !important;
}
.project-navbar a{
	margin-left: 43px;
	color:white;
	font-weight: 900;
	font-size: 15px;
	-webkit-transition: color 0.2s ease-in-out;
}
.project-navbar a:hover{
	background:black !important;
	color:#de153d;
}
.navbar-nav > ul li:hover{
}
.navbar-toggle .icon-bar {
    background-color: white;
}
.navbar-brand{
	font-size: 30px !important;
	font-weight: 900;
}
.nav > li > a{
	padding-left:0 !important;
}
[HTML] pobierz, plaintext 

Chyba czegoś nie ogarniam

[grzes999]

Coś takie spróbuj

[CSS] pobierz, plaintext 
@media screen and  (max-width: 1024px) {
     jakieś reguły
}
[CSS] pobierz, plaintext 

[hankos0]

Witaj!
Moim zdaniem problem masz tu:
dla elementów .navbar-right, .navbar-left używasz float: none
jeśli chcesz ukryć element powinienieś użyć display:none;

[tzm]

Witaj!
Moim zdaniem problem masz tu:
dla elementów .navbar-right, .navbar-left używasz float: none
jeśli chcesz ukryć element powinienieś użyć display:none;

Tak to robi bootstrap więc lepiej w to nie ingerować w moim zdaniem choć próbowałem, rozpieprza tylko menu..

edit:sugestie?

Ten post edytował tzm 12.11.2014, 14:59:38

[by_ikar]

Do ukrywania w różnych rozdzielczościach, czy też odsłaniania, jakichś kontenerów w bootstrapie masz klasy: .visible-*-* oraz .hidden-* http://getbootstrap.com/css/#responsive-utilities jeżeli dodatkowo wygenerowałeś bootstrapa pod siebie, a nie nadpisałeś jego domyślnych klas na swoje, to będzie działać to podobnie do grida, tzn nazwy tych klas będą podobne, przykładowo:

[HTML] pobierz, plaintext 
<div class="visible-xs-block"></div>
[HTML] pobierz, plaintext 

zawartość diva widoczna (jako element blokowy eg display: block;) będzie tylko w rozdzielczościach mniejszych niż 768px (domyślnie). Z kolei:

[HTML] pobierz, plaintext 
<div class="hidden-xs"></div>
[HTML] pobierz, plaintext 

zawartość diva widoczna będzie w rozdzielczościach większych niż 768px (domyślnie).

[tzm]

dzieki. co prawda sobie inaczej z tym poradzilem i zrobilem mocny dirty work around ale na pewne ogarne temat ktory podrzuciles, mozliwe ze lepiej bedzie przy nastepnym update zrobic to zgodnie ze sztuka gdyby jednak mialy byc jakies problemy z moim rozwiazaniem.