Question

我正在尝试使用此页面上的模板：

https://getbootstrap.com/docs/3.3/examples/dashboard/

如果你看看这一节：

<div class="container-fluid">
      <div class="row">
        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">

您会发现当缩小浏览器窗口的宽度时，侧边栏消失后会显示一个点。

问题是没有办法点击侧边栏中的链接。那么如何防止侧边栏消失，或至少改变它就像页面顶部的“导航栏” - ＆gt;它消失了，但点击汉堡按钮，就可以看到链接。

我可以在bootstrap中使用哪个类来执行此操作吗？

Answer 1

如果您检查代码，可以看到：

/* Hide for mobile, show later */
.sidebar {
  display: none;
}

@media (min-width: 768px) {
.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
  }
}

这实际上是隐藏侧边栏，直到你达到768像素宽，然后它变得固定在左边。您可以使用自己的移动代码删除或覆盖display: none;。

Answer 2

问题出在您的dashboard.css 行号：33

中

.sidebar {
    display: none;
}

只需删除它

Answer 3

我们可以通过在bootstrapp 3中添加类“ show”来覆盖边栏消失

<nav class="sidebar show">

或者我们可以在bootstrapp 3中崩溃：

<div class="col-xs-6 col-xs-offset-5 hidden-lg hidden-md hidden-sm">

   <a data-toggle="collapse" data-target="#sidebar" >
      <i class="icon-paragraph-justify3"></i></a>
</div>

<nav class="sidebar collapse" id="sidebar">

如何防止侧边栏消失？

3 个答案: