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

如果确实希望文本 1 和文本 2 各占一半 div，请尝试将页脚标记作为一个整体放在所有列中作为一个元素，然后将文本 1 和文本 2 嵌套在两个 div 列为 6。

Answer 2

像这样更改您的代码：

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

基本上，您摆脱双 footer 元素并将 container class 应用于 footer 元素，这样它会扩展整个宽度并保持为调整大小时单个 footer

这解决了您的问题并且在语义上是正确的，因为您不会有 2 footer 个元素

我添加了一个 Bootply 这样你就可以看到它是如何工作的

Answer 3

你不能不改变你的标记。

给你的页脚行另一个合适的更有意义 class：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

CSS: border-top 无法正常工作

CSS: Border-top won't work properly

html

css

twitter-bootstrap