я написал свои собственные минимальных самозагрузки NavBar таблицы стилей, которая строит на вершине переменного Bootstrap. /* материал Navbar */
.material-navbar {
/*
Hides normally visible elements
important notes:
@grid-float-breakpoint - point at which navbar becomes uncollapsed
@grid-float-breakpoint-max - point at which the navbar begins collapsing
*/
> * {
width: 100%;
flex: 1;
list-style-type: none;
}
> .left {
text-align: left;
}
> .center {
text-align: center;
}
> .right {
text-align: right;
}
padding: @navbar-padding-vertical @navbar-padding-horizontal;
margin: 0;
/* collapsed */
@media (max-width: @screen-sm-max) {
display: none;
}
/* not collapsed */
@media (min-width: (@screen-sm-max - 1px)) {
display: flex;
flex-direction: row;
align-items: baseline;
align-content: center;
flex-wrap: nowrap;
justify-content: space-between;
}
}
.material-navbar-collapsed {
/*
Shows normally visible elements
important notes:
@grid-float-breakpoint - point at which navbar becomes uncollapsed
@grid-float-breakpoint-max - point at which the navbar begins collapsing
*/
> * {
width: 100%;
flex: 1;
list-style-type: none;
}
> .left {
text-align: left;
}
> .center {
text-align: center;
}
> .right {
text-align: right;
}
padding: @navbar-padding-vertical @navbar-padding-horizontal;
margin: 0;
/* collapsed */
@media (max-width: @screen-sm-max) {
display: flex;
flex-direction: row;
align-items: baseline;
align-content: center;
flex-wrap: nowrap;
justify-content: space-between;
}
/* not collapsed */
@media (min-width: (@screen-sm-max - 1px)) {
display: none;
}
}
Пример: https://jsfiddle.net/eo2gsxcm/
Обновление 1: https://jsfiddle.net/eo2gsxcm/1/
Обновление 2: Набор видовых точек останова на экран-см-Max https://jsfiddle.net/eo2gsxcm/2/
Я знаю этот материал, вдохновленный темой. К сожалению, это не помогает с ответом на вопрос. –
на странице, которую вы связали, абсолютно ничего не видно, когда окно находится, любые другие фрагменты, которые у вас могут быть? –
вам нужно «переключиться на визуализацию» –