html - 如果屏幕小，Bootstrap 应用 nav-stacked

Question

假设我们有一个像这样的简单导航栏:
http://getbootstrap.com/components/#nav-pills

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

当窗口或父元素小于 940px 时，如何向其添加“nav-stacked”类。甚至更好:一旦导航栏不再适契约(Contract)一行中的所有元素。

这在 javascript 中会非常直接，但我希望看到一个纯 css/html 解决方案，但不向 Bootstrap 源代码添加 @media 查询。

Answer 1

找到解决方案。有一个名为“nav-justified”的类。一旦它们不再适合一行，它就会简单地堆叠导航药丸。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<ul class="nav nav-pills nav-justified">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>