页脚出现在部分旁边而不是下面答案

【问题标题】：Footer appears next to section instead of below页脚出现在部分旁边而不是下面
【发布时间】：2015-08-02 12:43:03
【问题描述】：

网站应该是这样的： https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/index.html

但是，底部部分彼此相邻而不是在下方。这是代码： (HTML) http://pastie.org/10325555

(CSS) http://pastie.org/10325550

【问题讨论】：

你需要把每个 col-md-4 div 放在自己的 row div 中，并把它改成 col-md-12
试过了，但还是不对

标签： html css twitter-bootstrap layout row

【解决方案1】：

只是一些调整！这是我的fiddle

.container {
  max-width: 928px;
  position: relative;
  display: block;
  !important
}
h1,
h2,
p,
a {
  font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
}
h1 {
  font-size: 64px;
  font-weight: 100;
  margin-bottom: 20px;
}
a {
  font-size: 18px;
  font-weight: 200;
}
.btn:link {
  background-color: rgba(238, 68, 95, 0.9);
  color: white;
  text-decoration: none;
}
a:active {
  background-color: rgba(238, 68, 95, 0.9);
  color: white;
  text-decoration: none;
}
a:hover {
  background-color: rgba(238, 68, 95, 0.9);
  color: white;
  text-decoration: none;
}
a:visited {
  background-color: rgba(238, 68, 95, 0.9);
  color: white;
  text-decoration: none;
}
#main {
  background: url("https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg") no-repeat center center;
  background-size: cover;
  height: 550px;
}
.main p {
  font-size: 26px;
  font-weight: 200;
  margin-bottom: 40px;
}
section .row {
  padding-top: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #dbdbdb;
}
.section h2 {
  font-size: 50px;
}
.store {
  text-align: center;
  border-bottom: 0px;
  padding-bottom: 0px
}
footer {
  position: relative;
  display: block!important;
  border-top: 1px solid #dbdbdb;
  background-color: #f3f3f3;
  padding: 20px 0px 80px;
}
.footer ul {
  list-style-type: none;
  padding-left: 0;
}
.footer li {
  color: #999;
  font-weight: 600;
}
@media (max-width: 500px) {
  .col-md-6 img {
    padding: 50px;
    width: 100%;
  }
}

<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />

<body>
  <div id="main">
    <div class="container">
      <h2>Heading</h2>

      <p>Paragraph Text</p> <a class="btn" href="#">Download Shutterbug</a>

    </div>
  </div>
  <section>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png">
        </div>
        <div class="col-md-6">
          <h2>Heading</h2>

          <p>Paragraph</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png">
        </div>
        <div class="col-md-6">
          <h2>Heading</h2>

          <p>Text Text Text Text Text</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png">
        </div>
        <div class="col-md-6">
          <h2>Heading<h3>
            <p>Text Text Text</p>
            <div>
           </div>     
                         
    
    <div class="store">
      <div class="container">
      <h2>Available for iPhone, iPad, and Android.</h2>

          <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
          <img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />
        </div>
      </div>

  </section>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h2>Company</h2>

          <ul>
            <li>Careers</li>
            <li>Terms</li>
            <li>Help</li>
          </ul>
        </div>
        <div class="col-md-4">
          <h2>Products</h2>

          <ul>
            <li>Shutterbugg</li>
            <li>Speakerboxx</li>
          </ul>
        </div>
        <div class="col-md-4">
          <h2>News</h2>

          <ul>
            <li>Blog</li>
            <li>Twitter</li>
            <li>Facebook</li>
            <li>Myspace</li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</body>

【讨论】：

顺便说一句，jsfiddle.net 是免费的，并且是向我们展示您的代码的一种非常方便的方式！
您能解释一下您所做的更改吗？
好吧，我将您的 div id=footer 和 section 放入
和
标签中，然后您缺少结束标签并将其更改为 display:block。他们是主要的东西
并添加位置：相对
谢谢，是的，您能说出缺少哪些结束标签吗？ id=footer 会改变结果吗？

【解决方案2】：

您需要清理类页脚的 padding-bottom。

.footer {
    border-top: 1px solid #dbdbdb;
    background-color: #f3f3f3;
    padding: 20px 0px 80px;
    padding-bottom: 0px;
}

希望对你有帮助。

【讨论】：