Bootstrap固定侧边栏示例

Question

尝试引导信息中心示例http://getbootstrap.com/examples/dashboard/

我的兴趣主要在于使用固定侧边栏模板。但有趣的是，当您切换到较小的视口时（如果是桌面，较小的窗口屏幕），侧边栏及其内容会消失。

它真的隐藏了吗？或者有没有办法在移动视图中查看侧边栏？ （在Chrome的移动视图调试模式下尝试切换设备按钮）

Answer 1

是隐藏默认样式。 dashboard.css中的第33行。

Answer 2

根据设计，它们会隐藏移动设备的侧边栏或屏幕尺寸非常小，以便重视内容。如果你想做一些不会受此影响的事情，你可以从这开始：

＆＃13;

＆＃13;

/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
a {text-decoration: none;}

html, body {height: 100%;}
body {padding-top: 50px; padding-left: 75px;}
p {margin: 0 0 10px;}

header {background-color: #000; position: fixed; top: 0; width: 100%; z-index: 2; left: 0;}
header h1 {line-height: 1; text-align: center; padding: 5px 0; font-weight: 1.5em;}
header h1 a {font-weight: normal; color: #fff;}

aside {position: fixed; left: 0; height: 100%; top: 30px; background-color: #99f; padding-top: 25px; z-index: 1; width: 70px;}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<header>
  <h1><a href="">Heading</a></h1>
</header>
<aside>
  <nav>
    <ul>
      <li><a href="">Item 1</a></li>
      <li><a href="">Item 2</a></li>
      <li><a href="">Item 3</a></li>
      <li><a href="">Item 4</a></li>
      <li><a href="">Item 5</a></li>
    </ul>
  </nav>
</aside>
<p>Jason John Gesser (born May 31, 1979) is an American college football coach and former player, currently the quarterbacks coach for the Wyoming Cowboys of the Mountain West Conference.</p>
<p>He was previously the interim head coach, offensive coordinator, quarterbacks coach, and recruiting coordinator for the Idaho Vandals of the WAC. He played quarterback for Washington State Cougars of the Pac-10 under head coach Mike Price, and played in the 2003 Rose Bowl. As a professional, Gesser played for the Utah Blaze of the Arena Football League, the Calgary Stampeders of the Canadian Football League, and the Tennessee Titans of the National Football League. He was originally hired at Idaho as running backs coach in June 2011. Gesser is the grandson of Green Bay Packers Hall of Fame member Joseph "Red" Dunn.</p>
<p>Jason John Gesser (born May 31, 1979) is an American college football coach and former player, currently the quarterbacks coach for the Wyoming Cowboys of the Mountain West Conference.</p>
<p>He was previously the interim head coach, offensive coordinator, quarterbacks coach, and recruiting coordinator for the Idaho Vandals of the WAC. He played quarterback for Washington State Cougars of the Pac-10 under head coach Mike Price, and played in the 2003 Rose Bowl. As a professional, Gesser played for the Utah Blaze of the Arena Football League, the Calgary Stampeders of the Canadian Football League, and the Tennessee Titans of the National Football League. He was originally hired at Idaho as running backs coach in June 2011. Gesser is the grandson of Green Bay Packers Hall of Fame member Joseph "Red" Dunn.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 3

是Anuj，它是隐藏的。 如果您打开dashboard.css并转到第行。 33您将在下面找到代码：

.sidebar {
  display: none;
}

如果您将该代码从display:none更改为display:block，您会在容器部门上方看到侧栏。

但是你真的想要在平板电脑或移动设备等小型设备上修复边栏（我不推荐你这样做），你必须自己玩CSS并找到修复方法。这是我做过的事情

.sidebar{
    display:inline-block;
    float:left:
}

我正在上传两个场景的快照。 谢谢， Jimish

Answer 4

这是css响应属性@mediaquery，您可以通过该属性将规则应用于特定屏幕大小的元素。即如果你检查

@media (min-width: 768px)
.sidebar {
  /* other rules   */
  display: block;    //display on width more than 768px
 /* other rules   */
}

且宽度小于768px

.sidebar {
  display: none;  // it will hide the sidebar
}

Answer 5

您只能通过CSS控制，使用以下代码：

.navbar-fixed-top .sidebar {   display: inherit !important;}

否则你创建一个父id设置一个css相同的fomat

#id-name .sidebar {   display: inherit !important;}