我的页面底部不会响应 CSS 样式

Question

我对此布局有疑问。一切顺利，直到我通过 "section banner"。没有什么会正确响应 CSS。我无法对齐任何东西。我让 "col-md-4" 正确居中，但它上面的 header 不会移动到我想要的位置。我能让它居中的唯一方法是将它放在 "row" div 之间。但这并不能解决我根本无法为它调整 padding/margin 的面子。

页脚也完全不合时宜。无法使其居中。没有。

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Arvo', serif;
  font-size: 16px;
}
.header {
  max-width: 100%;
  margin: 0 auto;
}
/* Header */

.nav {
  position: relative;
  top: 10px;
}
.nav-pills li a {
  color: #d8192f;
}
.nav-pills li.active a,
.nav-pills li a:hover,
.section .btn:hover {
  background-color: rgba(216, 25, 47, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  color: #fff;
}
.row-centered {
  text-align: center;
}
.col-centered {
  display: inline-block;
  float: none;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
}
/* Jumbotron */

.jumbotron {
  height: 500px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg) no-repeat center center;
  background-size: cover;
  height: 500px;
  margin-top: 10px;
}
.jumbotron h2:first-child {
  margin: 100px 0 0;
}
.jumbotron h2 {
  color: white;
  font-size: 60px;
  text-align: right;
  margin: 0;
}
/* Banner */

.banner,
.supporting {
  text-align: center;
  padding-top: 20px;
}
.banner {
  background-color: #36343f;
  height: 150px;
  color: #fff;
  margin-bottom: 30px;
}
.btn {
  background-color: rgba(216, 25, 47, .5);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  color: #fff;
  margin-top: 10px;
}
}
/* Media Queries */

@media (max-width: 680px) {
  .header h1 {
    margin-bottom: 20px;
    text-align: center;
  }
  .header2 h2 {
    position: relative;
    width: 100%;
    margin: 0px 0px 0px 0px;
    text-align: center;
    clear: both;
  }
  .footer {
    max-width: 33%;
    margin: 0 auto;
    display: inline-block;
    clear: both;
  }

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
  <link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <div class="container">
      <div class="row row-centered">
        <div class="col-md-6 col-centered">
          <h1>BestBite</h1> 
        </div>
        <div class="col-md-6 col-centered">
          <ul class="nav nav-pills">
            <li class="active"><a href="#">About</a>
            </li>
            <li><a href="#">Sign Up</a>
            </li>
            <li><a href="#">Log In</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>


  <div class="jumbotron">
    <div class="container">
      <div class="col-md-4">
        <h2>Browse.</h2>
        <h2>Create.</h2>
        <h2>Share.</h2>
      </div>
    </div>
  </div>
  <div class="section banner">
    <div class="container">
      <h3>Always have the answer to "What's for dinner?"</h3>
      <a class="btn" href="#">Learn More</a>
    </div>
  </div>

  <div class="section">
    <div class="container">
      <div class="header2">
        <h2>Test</h2>
      </div>
      <div class="row row-centered">
        <div class="col-md-4">
          <h3>One</h3>
          <p>One</p>
          <p>Two</p>
          <p>Three</p>
        </div>
        <div class="col-md-4">
          <h3>Two</h3>
          <p>One</p>
          <p>Two</p>
          <p>Three</p>
        </div>
        <div class="col-md-4">
          <h3>Three</h3>
          <p>One</p>
          <p>Two</p>
          <p>Three</p>
        </div>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="row">
      <div class="col-md-4">
        <p class="a-left">One</p>
      </div>
      <div class="col-md-4">
        <p class="a-center">One</p>
        <div>
          <div class="col-md-4">
            <p class="a-right">One</p>
          </div>
        </div>
      </div>

</body>

</html>

Answer 1

您的 css 有额外的 }（在媒体查询之前）。

此外，您必须设置一个宽度为 100% 的 div 块以使页脚居中，并将 text-align: center 添加到子 p 标签。

对于大屏幕上的页脚边距，只需添加：

.row .footer{
   margin: 30px 0
}

JSfiddle：https://jsfiddle.net/1pwbhuzz/3/

Answer 2

有了这个，您将使页脚列居中：

HTML

 <div class="footer">
    <div class="container">
    <div class="row">
         <div class="col-xs-12 col-md-4"><p>One</p></div>
         <div class="col-xs-12 col-md-4"><p>One</p></div>
         <div class="col-xs-12 col-md-4"><p>One</p></div>
     </div></div>
</div>

CSS

.footer p {
    text-align: center;
}

并删除媒体查询中的页脚 class。

我的页面底部不会响应 CSS 样式

Bottom of my page won't respond to an CSS styling

html

css