Question

我在引导程序站点设置方面存在一些问题，出于某种原因，当窗口小于767px时，右侧有20px填充，我不知道如何去除它。

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>

典型的bootstrap 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;
  }
}

希望有人可以提供帮助。

丹佛

Answer 1

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

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

如果您删除float:none，则菜单将与右侧对齐。

Answer 2

问题在于页脚中的margin-right: -20px;。这会导致页脚部分延伸并创建滚动。

以下是更新：

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

希望这有帮助。

Answer 3

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

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

屏幕尺寸767px和Bootstrap以下的边框

3 个答案: