如何使xs设备的侧边栏水平

Question

我使用的是引导程序附带的默认CSS；还使用引导程序主题和仪表板CSS。

默认情况下，在xs设备上，侧边栏会消失。好吧，这就是我在应用程序的所有主导航中使用的内容。所以，我希望它在这样的设备上切换到水平布局，但我在网上找不到任何关于如何做到这一点的信息。

我搜索了文档，但它非常糟糕。应该有所有类及其用途的分类。我想我可以添加一个类来做我想做的事情。

有人知道吗？

这是html:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-1 col-md-1 col-lg-1 overflow-fix">
      <ul class="nav nav-sidebar">
        <li class="icon-center">
          <a href="/admin" ><i class="fa fa-tasks fa-2x" data-toggle="tooltip" data-placement="right" title="Recent Activity"></i></a>
        </li>
        <li class="icon-center">
          <a href="/admin/users"><i class="fa fa-users fa-2x" data-toggle="tooltip" data-placement="right" title="Users"></i></a>
        </li>
        <li class="icon-center">
          <a href="/admin/accounts"><i class="fa fa-building-o fa-2x" data-toggle="tooltip" data-placement="right" title="Accounts"></i></a>
        </li>
        <li class="icon-center">
          <a href="/admin/branches"><i class="fa fa-sitemap fa-2x" data-toggle="tooltip" data-placement="right" title="Branches"></i></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

事实证明.css文件实际上有很好的注释，所以我能够看到。边栏类有显示：none；然后在它下面找到了媒体查询，当在更大的视图端口上时，该查询会被激活。

将以下内容添加到我的覆盖css文件中，现在它在小屏幕上变为水平居中菜单，然后在大屏幕上弹回侧边栏。

.sidebar {
  display:block;
  border-bottom: 1px solid #eee;
}
.sidebar ul {
  text-align:center;
  margin-bottom:0px;
}
.sidebar ul li{
  display:inline-block;
}
@media (min-width: 768px) {
  .sidebar ul li{
    display:block;
  }
}

我对CSS很陌生，所以如果有人对如何更好地格式化上面的代码有建议，请不要犹豫，分享！

Answer 2

侧边栏默认显示：none。可以推翻这一点

.sidebar
{
    display:block;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
}