Javascript 根据大小在引导中切换类？

我知道我可以使用boostrap的

hidden-*

和`visible-*类切换某些元素，但我希望做一些不同的事情

我希望在大小减小到某一点时，在单个控件上切换某些类。例如，我有一个导航元素，当

sm

和

xs

处于活动状态时，它需要从垂直列表折叠到水平列表。目前，我是这样做的：

    <ul class="nav nav-pills nav-stacked hidden-sm hidden-xs">
      <li class="active"><a data-toggle="pill" href="#personalInfo">Personal</a></li>
      <li><a data-toggle="pill" href="#contactInfo">Contact</a></li>
      <li><a data-toggle="pill" href="#menu2">General</a></li>
      <li><a data-toggle="pill" href="#menu3">History</a></li>
    </ul>

    <ul class="nav nav-pills visible-sm visible-xs">
      <li class="active"><a data-toggle="pill" href="#personalInfo">Personal </a></li>
      <li><a data-toggle="pill" href="#contactInfo">Contact</a></li>
      <li><a data-toggle="pill" href="#menu2">General</a></li>
      <li><a data-toggle="pill" href="#menu3">History</a></li>
    </ul>

---

然而，维护单独的列表可能会令人烦恼。是否还有其他方法可以实现我的目标（最好不使用javascript）？

您可以在不同的断点处更改样式。这就是你的意思吗？有点，但有点不同。媒体查询会更改样式，但是bootstrap已经有了我需要进行更改的类，我只需要在某个类自己的媒体查询启动时删除该类。如果没有javascript，则必须使用媒体查询并覆盖要删除的类中的样式。如果您不介意添加javascript，您可以打开一个侦听器并加载页面，检查

.outerWidth（）

，然后根据需要切换类；这里推荐JavaScript的每个人都是对的。该框架本机不支持这一点，虽然媒体查询可以工作，但它会创建冗余代码。JS带有一个调整大小/加载的侦听器，可以智能地添加或删除

nav stacked

，这将是您的最佳选择。您可以使用它在不同的断点处更改样式。这就是你的意思吗？有点，但有点不同。媒体查询会更改样式，但是bootstrap已经有了我需要进行更改的类，我只需要在某个类自己的媒体查询启动时删除该类。如果没有javascript，则必须使用媒体查询并覆盖要删除的类中的样式。如果您不介意添加javascript，您可以打开一个侦听器并加载页面，检查

.outerWidth（）

，然后根据需要切换类；这里推荐JavaScript的每个人都是对的。该框架本机不支持这一点，虽然媒体查询可以工作，但它会创建冗余代码。JS上的侦听器可以智能地添加或删除

nav-stacked

，这将是最好的选择。