html - CSS:Border-top 无法正常工作

Question

我正在使用 Bootstrap 并尝试修复边框。由于左右拉动，它只会出现在文本上方。我应该怎么做才能让它出现在整条线上？

HTML

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="pull-left">
          <footer class="footer"><p>text1</p></footer>
        </div>
        </div>
    <div class="col-md-6">
      <div class="pull-right">
         <footer class="footer"><p>text2</p></footer>
      </div>
    </div>
  </div>
</div>

CSS

.footer {
    padding-top: 19px;
    margin-top: 7px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}

Answer 1

如果不更改标记，您不能。

为您的页脚行提供另一个合适的类:footer-row 并将样式应用于它更有意义:

HTML

<div class="container">
  <div class="row footer-row">
    <div class="col-md-6">
      <div class="pull-left">
          <footer class="footer"><p>text1</p></footer>
        </div>
        </div>
    <div class="col-md-6">
      <div class="pull-right">
         <footer class="footer"><p>text2</p></footer>
      </div>
    </div>
  </div>
</div>

CSS

.footer-row {
    padding-top: 19px;
    margin-top: 7px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}

Bootply