css - Bootstrap的`nav`类如何使 anchor 移动到自己的行

我试图弄清楚什么CSS导致a元素在具有Bootstrap的nav类时坐在自己的行上，当我发现应用于它们与a的样式没有任何有意义的区别时没有nav的元素。我已经查看了所应用的规则，甚至比较了计算出的样式，但没有任何东西可以解释它。

这是一个示例：第一个段落中的a（带有nav类）位于其自己的行上，而第二个段落中的a不是：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<p>before <a id="a1" class="nav" href="#">link</a> after</p>
<p>before <a id="a2"             href="#">link</a> after</p>

如果我检查a.nav元素，则会看到此规则适用：

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

...但是我不知道这是如何导致它坐在自己的线上的。因此，在上面的示例中，我写了一些代码来比较两个a元素的计算样式，以防万一我神奇地错过了其他规则。看起来不像；它们的计算样式与list-style-type相同（因此与list-style相同）：

(function() {
  var s1 = getComputedStyle(document.getElementById("a1")),
      s2 = getComputedStyle(document.getElementById("a2")),
      diffs = {};

  function logDifferences(prop) {
    var s1value = s1[prop],
        s2value = s2[prop];
    if (prop != "cssText" && s1value !== s2value) {
      diffs[prop] = {
        s1: s1value,
        s2: s2value
      }
    }
  }

  Object.keys(s1).forEach(logDifferences);
  Object.keys(s2).forEach(logDifferences);
  Object.keys(diffs).sort().forEach(function(prop) {
    var diff = diffs[prop];
    display(prop + ": '" + diff.s1 + "' != '" + diff.s2 + "'")
  });

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
})();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<p>before <a id="a1" class="nav" href="#">link</a> after</p>
<p>before <a id="a2"             href="#">link</a> after</p>

list-style-type不应导致此行为，并且确实，如果我推翻了我仍然可以得到该行为，并且元素的计算样式相同，那么：

(function() {
  var s1 = getComputedStyle(document.getElementById("a1")),
      s2 = getComputedStyle(document.getElementById("a2")),
      diffs = {};

  function logDifferences(prop) {
    var s1value = s1[prop],
        s2value = s2[prop];
    if (prop != "cssText" && s1value !== s2value) {
      diffs[prop] = {
        s1: s1value,
        s2: s2value
      }
    }
  }

  Object.keys(s1).forEach(logDifferences);
  Object.keys(s2).forEach(logDifferences);
  Object.keys(diffs).sort().forEach(function(prop) {
    var diff = diffs[prop];
    display(prop + ": '" + diff.s1 + "' != '" + diff.s2 + "'")
  });

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
})();

a.nav {
  list-style-type: disc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<p>before <a id="a1" class="nav" href="#">link</a> after</p>
<p>before <a id="a2"             href="#">link</a> after</p>

因此它不是list-style-type。

元素的顺序也不是：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<p>before <a id="a2"             href="#">link</a> after</p>
<p>before <a id="a1" class="nav" href="#">link</a> after</p>

是什么导致a.nav移至其自己的行？

请注意，问题不在于如何解决。我们已经修复了它（它们不应该具有nav，在将Bootstrap应用于项目之前，我们已经将其用于其他用途，并且我们刚刚对其进行了重命名，因此不会错误地应用Bootstrap的规则）。问题是什么原因造成的？

最佳答案

这是由于::before和::after伪元素造成的。专门设置它们是为了清除围绕它们的所有浮动元素，但是这样做的副作用是，它们还会导致元素本身被下推到新行。



令人讨厌的样式很简单：

...::before, ...::after {
  display: table;
  content: " ";
}

其中...这里是一长串的选择器，包括.nav::after和.nav::before。

关于css - Bootstrap的`nav`类如何使 anchor 移动到自己的行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31404746/