Question

在移动设备上查看时，我希望我的导航栏不会崩溃，但请保留原始桌面版网站。我通过在媒体屏幕中覆盖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>

以下是现在的照片：

@YSC's answer

以下是我希望的照片：

Answer 1

解决方案是将样式应用于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>

响应式导航栏，带引导程序3

1 个答案: