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 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类应用于footer元素，以便它扩展整个宽度并保持为单footer调整大小时

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

我添加了Bootply，以便您了解其工作原理

Answer 2

您无法更改标记。

更有意义的是，为您的页脚行添加另一个适合的类：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

Answer 3

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

CSS：Border-top无法正常工作

3 个答案: