Question

我创建了一个左侧栏。是否可以将侧栏固定在屏幕上。每当我将屏幕缩小时，左侧栏就会消失。

<div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="index.php">Categories <span class="sr-only">(current)</span></a></li>

这是我的侧栏代码。它从mySql使用php获取类别名称。

Answer 1

如果我找到了你，侧边栏总是可见的？如果是这样，请将其添加到整个网格系统中。

<div class="container-fluid" id="page">
    <div class="row">
        <div class="col-xs-9" id="content">MAIN CONTENT</div>
        <div class="col-xs-3" id="sidebar">SIDEBAR</div>
    </div>
</div>

基于bootstrap文档，col-xs是最小的col大小，也应该定义。我假设您有一个12列网格。否则，您必须更改列设置。

Answer 2

补充工具栏不会消失。它属于主要内容，适用于较小的屏幕尺寸。如果您不需要自适应布局，可以在bootstrap documentation page找到更多信息。

Answer 3

您需要使用媒体查询来避免侧边栏变得奇怪而且填充在较小的屏幕中。
例如，让我们说我们有：

<div class="container">
    <div class="leftSidebar">Left Sidebar</div>
    <div class="mainContent">Main Content</div>
    <div class="clear"></div>
</div>

我可以将我的 mainContent 类设为float:right;浮动在右侧，然后float:left;设置为 leftSidebar 漂浮在左侧。但是我们希望修复补充工具栏，因此，只要我们将 leftSidebar 称为float:left;，position:fixed;就不会在这里做任何事情。所以，我们将如何设计这两个div：

.leftSidebar {
    width: 100px;
    height: 300px;
    /* Making sidebar fixed */
    position:fixed;
}
.mainContent {
    width: 400px;
    height: 300px;
    float: right;
}

好吧!!! 我们现在有一个固定的侧边栏和一个主要内容对齐的div。

现在呢？当我调整窗口大小或在较小的屏幕上访问网站时，我不希望侧边栏表现得很奇怪并超出主要内容！

这就是媒体查询的用武之地。通过媒体查询，我们可以告诉边栏不再修复

/* Media query to create a fix for smaller screens */

@media (max-width: 450px){
    .leftSidebar {
        width: 80%; /* Meet your new width Sidebar! */
        margin: 0 auto;
        position:inherit; /* No more Fixed position for you sidebar!! */
    }
    .mainContent {
        width: 80%; /* Meet your new width mainContent! */
        margin: 0 auto;
        float:none; /* What are you doing float right? I don't want .mainContent to float right anymore! Now it's float:none; !! */
    }
}

这是最终结果online example

最后，我们可以更改侧边栏的顺序，如果我们希望它首先显示在.mainContent之后或.mainContent之后。首先出现侧边栏：

<div class="leftSidebar">Left Sidebar</div>
<div class="mainContent">Main Content</div>

侧栏出现在.mainContent之后，只是类的反向顺序：

<div class="mainContent">Main Content</div>
<div class="leftSidebar">Left Sidebar</div>

引导左侧栏

3 个答案: