Question

我正在使用edx上的微软Intro to Bootstrap课程（DEV203x）。我在那里看到了这条信息：

要添加不被视为导航栏一部分的普通链接，请将navbar-link类添加到a元素。锚必须包含在导航栏文本容器中。

<div class="navbar-text">
  <a class="navbar-link" href="URL here">
    Follow us!
  </a>
</div>

据说可以像这样添加普通链接：

<ul><li>
  <a href="URL here">
    A normal link!
  </a>
</li></ul>

这些链接在页面上的显示方式似乎没有太大区别。只有navbar-text的样式才会应用于navbar-link，因为它已包含在该标记中。

我在这里错过了什么吗？

Answer 1

第一个例子是使用bootstrap结构进行css /样式，而第二个例子是使用bb /样式的hb。在这种情况下，Bootstrap可能没有应用任何东西，因为你自己的css /样式表会覆盖它们，而且很难说出更多的信息。

您还需要确认是否已正确设置引导程序，因为根据Bootstraps外观它们应该看起来不同。请参阅此处以获取导航栏链接的示例; http://getbootstrap.com/components/#navbar-links

Answer 2

为了安全起见，普通链接会添加<ul class="nav navbar-nav">，而不仅仅是ul（我很确定您已经知道了）。

对于使用不在常规导航栏中的标准链接的人导航组件，使用.navbar-link类添加正确的默认和反向导航栏选项的颜色。

差异可能很微妙，但它们非常重要，因为它们非常有用。不在常规导航中的链接就是这一点的起点，因为您可以使用这些类添加文本或链接到导航栏，但不符合标准{ {1}} + ul结构。

在您提供的示例中，存在差异（即使非常小）。可能不需要这样做（参见示例3 ）：

li

因为Bootstrap在<div class="navbar-text"> <a class="navbar-link" href="URL here"> Follow us! </a> </div>类中处理HREFs至于它的导航组件的定位和样式，所以这不会有意义，如果你真的打破了缩小浏览器并打开折叠的导航栏，您会在示例3中看到不合适的链接。您还会看到，如果您将鼠标悬停在第一个链接上，则会加下划线。对于默认导航链接，情况并非如此。

作为示例：如果您需要在导航栏折叠移动设备时仍然显示某些文字/链接，请在li内使用这些标记，然后对其进行适当的定位/设置，以便您赢得＆＃39; t（必然）必须自己编写CSS。以及navbar-header面板内部，但navbar-collapse类之外。

请参阅以下整页摘录中的3个示例。

1）适当地使用这些类。

2）与 First 相同的示例结构，但未应用这些类。

3）我相信你的例子说明了。

＆＃13;

ul

＆＃13;

普通导航栏链接与class =“navbar-link”之间有什么区别？

2 个答案: