0

我在引导站点设置方面遇到了一些问题，由于某种原因，当窗口小于 767 像素时，右侧有一个 20 像素的填充，我不知道如何摆脱它。

这里是网站http://surf96.com/defaulttheme/

html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sticky footer &middot; Twitter Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">    
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="img/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="img/ico/favicon.png">
  </head>

  <body>


     <div id="wrap">
        <div  class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-target=".nav-collapse"
                    data-toggle="collapse"><span class="icon-bar"></span>
                    <span class="icon-bar"></span> <span class=
                    "icon-bar"></span></a>

                    <div class="nav-collapse">
                        <ul class="nav">
                            <li class="active">
                                <a href="#">Menu</a>
                            </li>

                            <li>
                                <a href="#">On Tap</a>
                            </li>

                            <li>
                                <a href="#">Shows</a>
                            </li>

                            <li>
                                <a href="#">Surfwear</a>
                            </li>

                            <li>
                                <a href="#">Contact</a>
                            </li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div><!-- container -->
            </div><!-- navbar-inner -->
        </div><!--  navbar navbar-fixed-top -->

        <div class="page-header">
            <h1>Sticky footer</h1>
        </div>
    </div><!-- Begin page content -->

    <div class="container">
        <div id="push"></div>
    </div>

    <footer>
        <div class="container">
            <p class="muted credit">Example courtesy <a href=
            "http://martinbean.co.uk">Martin Bean</a> and <a href=
            "http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
        </div>
    <footer>


    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/vendor/jquery-1.9.1.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>

  </body>
</html>

典型的引导 css 和粘性页脚。

/* Sticky footer styles
      -------------------------------------------------- */

      html,
      body {
        height: 100%;
        /* The html and body elements cannot have any padding or margin. */
      }

      /* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -60px;
      }

      /* Set the fixed height of the footer here */
      #push,
      footer {
        height: 60px;
      }
      footer {
        background-color: #f5f5f5;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }


body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

希望有人可以提供帮助。

丹佛

4

3 回答 3

0

问题出 margin-right: -20px;在页脚中。这导致页脚部分扩展并创建滚动。

这是更新：

footer {
    margin-left: -20px;
    /*margin-right: -20px;*/
    padding-left: 20px;
    padding-right: 20px;
}

希望这可以帮助。

于 2013-05-15T06:37:20.017 回答
0

在 bootstrap.css 和 bootstrap-responsive.css 中将以下填充值更改为 0。或者您可以在自定义 css 文件中覆盖它。

@media(max-width: 767px) {
    body {
        padding-right: 20px;
        padding-left: 20px;
    }
}
于 2013-07-25T02:10:57.987 回答
0

如果要删除导航栏之前的空格，则必须删除您在 CSS 中设置的属性之一：

.navbar .nav, .navbar .nav > li {
  float: none; <--
  ...
}

如果删除float:none，菜单将向右对齐。

于 2013-05-15T06:22:43.473 回答