Html 引导左侧栏

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

<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>

---

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

如果我没弄错，侧边栏总是可见的？如果是这样，将其添加到整个网格系统中

<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>

主要内容
边栏

---

根据引导文档，col xs是最小的col大小，也应该定义。我假设你有一个12列的网格。否则您必须更改列设置。

侧边栏不会消失。它位于主要内容之下，这对较小的屏幕尺寸很有好处。如果您不需要响应式布局，您可以在上找到更多信息。

您需要使用媒体查询，以避免侧边栏变得异常，并在较小的屏幕中出现内容。
例如，假设我们有：

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

好吧我们现在有一个固定的边栏和一个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; !! */
    }
}

a这是最终结果，

最后，我们可以更改侧边栏的顺序，如果希望它出现在

.mainContent

之前或

.mainContent

之后。对于侧边栏，首先显示：

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

---

位置：固定；是您的css属性。

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

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