Question

当我无法使用Bootstrap的a课程时，我试图找出CSS导致nav元素在他们自己的行上占用的因素，我不能发现应用于它们的样式与没有a的{{1}}元素之间存在任何有意义的差异。我已经查看了应用的规则，甚至比较了计算出的样式，我没有看到任何解释它。

以下是一个示例：第一段中的nav（a类）位于其自己的行上，而第二段中的nav并不是{39}} ; T：

＆＃13;

如果我检查<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> before <a id="a1" class="nav" href="#">link</a> after before <a id="a2" href="#">link</a> after元素，我会看到应用此规则：

a.nav

...但我不知道这是如何导致它自成一线的。所以我写了一些代码来比较上面例子中两个.nav { padding-left: 0; margin-bottom: 0; list-style: none; }元素的计算样式，以防我在某种程度上神奇地错过了其他一些规则。看起来不像;除了a（因此list-style-type）之外，他们的计算样式是相同的：

＆＃13;

list-style

＆＃13;

(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);
  }
})();

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> before <a id="a1" class="nav" href="#">link</a> after before <a id="a2" href="#">link</a> after不应该导致这种行为，事实上，如果我否决了我仍然得到行为，那么元素的计算样式是相同的：

＆＃13;

list-style-type

＆＃13;

(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);
  }
})();

＆＃13;

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

＆＃13;

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

也不是元素的顺序：

＆＃13;

list-style-type

＆＃13;

是什么导致<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> before <a id="a2" href="#">link</a> after before <a id="a1" class="nav" href="#">link</a> after移动到自己的行？

请注意，问题不在于如何解决。我们已经修复了它们（它们不应该a.nav，我们在将Bootstrap应用到项目之前将其用于其他内容，而我们只是将我们重命名为Bootstrap＆＃39;规则不会被错误地应用）。问题是导致它的原因是什么？

Answer 1

这是由::before和::after伪元素引起的。它们专门设置为清除它们周围的任何浮动元素，但这样做的一个副作用是它们也会导致元素本身被推到一个新行。

Example

令人讨厌的风格非常简单：

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

^{其中......这里有一长串选择器，包括.nav::after和.nav::before。}

Answer 2

您正在寻找的规则是相当冗长的

.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
    content: " ";
    display: table;
}

Answer 3

如果你进一步检查元素，你会发现.nav:after和nav.before有display: table这就是为什么它就在它自己的行中

.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before,
.btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before,
.container-fluid:after, .container-fluid:before, .container:after, 
.container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, 
.form-horizontal .form-group:after, .form-horizontal .form-group:before,
.modal-footer:after, .modal-footer:before, .nav:after, .nav:before, 
.navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, 
.navbar-header:before, .navbar:after, .navbar:before, .pager:after, 
.pager:before, .panel-body:after, .panel-body:before, .row:after, 
.row:before {
    display: table;
    content: " ";
}

Bootstrap的“nav”类如何使锚点移动到他们自己的行

3 个答案: