0

わかりましたので、ここに私のコードはすべて、いくつかのcssスタイリングを備えた単純なナビゲーションバーです。何らかの理由で、モバイルビューに縮小するたびに、画面幅の100％にならず、左右にマージンがあります約20px

CSS

.navbar .brand {
    width:150px;;
}
 .nav-collapse > ul >li{
    padding-top:50px;
 }
 html, body {
     margin:0px;!important
     padding:0px;!important
     }

.nav .active a { background:#06F!important;
color:white!important;
}



    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */
    .navbar-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; 
    }
    .navbar-wrapper .navbar {


    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
      width:150px;
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 18px 20px;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }



    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {

        margin: 0px 0px -20px 0;
      }


    }


    @media (max-width: 767px) {

        .navbar {
            width:100%;
            }
        .navbar .navbar-inner {
        width:100%;
        margin-right:0px;
            margin-left:0px;

            }

      .navbar-inner {
        margin: 0px 0px -20px 0;
      }

    }

HTML

 <div class="navbar">
      <div class="navbar-inner btn-block">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">MOBILE</a>
          <div class="nav-collapse collapse text-center">
            <ul class="nav pull-right">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Events</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--container END-->
      </div>
    </div>

脚本

  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="docs/assets/js/jquery.js"></script>
    <script src="docs/assets/js/bootstrap.js"></script>
    <script src="docs/assets/js/bootstrap.min.js"></script>
    <script src="docs/assets/js/holder/holder.js"></script>
    <script src="docs/assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>
4

2 に答える 2

2

Bootstrap CSS は、小さな画面で本文にパディングを追加します。

@media (max-width: 767px)
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

上書きしてみてください：

@media (max-width: 767px)
  body {
    padding: 0;
  }
}
于 2013-06-29T05:29:00.247 に答える
0

スクリプトでコードをテストすることはできませんが、これを試すことはできます。

.navbar-wrapper, .navbar, .navbar-inner, .container{
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
}

あなたのcssの上部にあります。他の css (マージンとパディングの作成) は、これを一番上に置くと無効になります。

機能しない場合は、これを一番下に置いて、何らかの方法で機能するかどうかを確認してください。css の一番下にある場合、問題はコードにあります。そうでない場合、ブートストラップによって作成されたスクリプトにスタイル タグが付けられている可能性があり、常に外部 css を無効にします。

于 2013-06-29T05:25:12.993 に答える