0
При просмотре на мобильных устройствах я бы хотел, чтобы мой навигатор не рухнул, но остался как на исходном рабочем столе. Я достиг этого, перезаписав CSS на экране мультимедиа (код ниже). Однако я хотел бы, чтобы навигатор растянулся по всей ширине, и этого я не могу достичь.отзывчивый navbar с bootstrap 3
Я попытался сменить цвет фона navbar-default на черный, но он добавляет некоторый запас, который я не могу удалить.
@media screen
and (min-width: 320px)
and (max-width: 767px)
and (orientation: landscape) {
body{
margin: 0 auto;
background-image: url(../images/background_vm.jpg);
/*background-repeat:no-repeat;*/
background-attachment: fixed;
background-size:100% auto;
font-family: 'Tinos', 'Times New Roman';
font-size: 22px;
margin-top: 0px;
}
.head-bg{
width: 100%;
height: 50px;
background: url(../images/nadpis2_bg.jpg);
background-size:100% 100%;
background-attachment: fixed;
}
.flags{
margin-top: -25px;
padding-right: 35px;
}
.flags img{
width: 35%;
}
.container{
max-width: 760px;
}
.content{
padding: 15px;
}
.height{
height: 50px;
background-color: transparent;
}
/* Always float the navbar header */
.navbar-header {
float: left;
}
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}
/* Always apply the floated nav */
.navbar-nav {
background-color: #000;
float: none;
display: inline-block;
}
.navbar-nav > li {
float: left;
}
.navbar-default {
background-color: transparent;
border-color: transparent;
border-top-color: white;
}
.navbar-default .navbar-nav > li > a {
padding-left: 20px;
padding-right: 20px;
padding-top: 3px;
padding-bottom: 3px;
color: white;
font-size: 12px;
}
/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
float: right;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="head-bg">
<div class="container">
<div class="pull-right flags hidden-xs">
<a><img src="/images/bg_ico.png" alt="BG"></a>
<a href=<!--#echo var="MENU_NAME"-->><img src="/images/eng_ico.png" alt="EN"></a>
</div>
<div class="height"></div>
<nav class="navbar navbar-default " role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav np">
<li class="nol"><a href="/bg/home">ЗА НАС</a></li>
<li><a href="/bg/studio">СТУДИО</a></li>
<li><a href="/bg/gallery">ГАЛЕРИЯ</a></li>
<li><a href="/bg/news">НОВИНИ</a></li>
<li><a href="/bg/shop">Е-МАГАЗИН</a></li>
<li class="nor"><a href="/bg/contact">КОНТАКТИ</a></li>
</ul>
</div>
</nav>
<div class="pull-right flags visible-xs">
<a><img src="/images/bg_ico.png" alt="BG"></a>
<a href=<!--#echo var="MENU_NAME"-->><img src="/images/eng_ico.png" alt="EN"></a>
</div>Вот фотография того, что она выглядит сейчас:
А вот фото того, что я хотел бы, чтобы это было:
Пожалуйста, создайте [jsFiddle] (https://jsfiddle.net/) с помощью кода и любых других соответствующих таблиц стилей и т.д. что у вас есть, поэтому мы можем видеть проблему в действии. – Adam0410
https://jsfiddle.net/9sodzebh/ – gali4ka