Question

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

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

我仔细检查了文档，但这是非常糟糕的IMO。应该有所有类及其用途的细分。我想我可以添加一个可以做我想要的课程。

有人知道吗？

这是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类有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设备的侧边栏水平

2 个答案: