bootstrap 3 的响应式导航栏
responsive navbar with bootstrap 3
在移动设备上查看时，我希望我的导航栏不会折叠，而是保持在原始桌面网站中。我通过在媒体屏幕（下面的代码）中覆盖 CSS 来实现这一点。但是，我希望导航栏在整个宽度上延伸，但我无法实现。
我尝试将 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>
这是现在的照片：
这是我想要的照片：
解决方案是将样式应用于 navbar-collapse div 内的 ul。这是 css.
.navbar-collapse > ul {
width: 100%;
margin: 0 auto !important;
}
这里是固定的例子：
@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-collapse > ul {
width: 100%;
margin: 0 auto !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>
在移动设备上查看时，我希望我的导航栏不会折叠，而是保持在原始桌面网站中。我通过在媒体屏幕（下面的代码）中覆盖 CSS 来实现这一点。但是，我希望导航栏在整个宽度上延伸，但我无法实现。
我尝试将 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>
这是现在的照片：
这是我想要的照片：
解决方案是将样式应用于 navbar-collapse div 内的 ul。这是 css.
.navbar-collapse > ul {
width: 100%;
margin: 0 auto !important;
}
这里是固定的例子：
@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-collapse > ul {
width: 100%;
margin: 0 auto !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>