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

Question

我正在使用 bootstrap 附带的默认值 CSS；还使用 bootstrap 主题和仪表板 CSS。

默认情况下，在 xs 设备上，边栏会消失。好吧，这就是我用于所有应用程序主导航的内容。所以，我希望它在此类设备上切换到水平布局，但我无法在网上找到有关如何执行此操作的任何信息。

我搜索了文档，但 IMO 非常糟糕。应该对所有 classes 及其用途进行细分。我想象有一个 class 我可以添加它会做我想做的事。

有人知道吗？

这是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 文件实际上有很好的评论，所以我能够看到 .sidebar class 有 display: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;
}

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

How to make sidebar horizontal for xs devices

html

css

navigation

sidebar

twitter-bootstrap