如何添加侧边栏？

下面是post.html的CSS：如何添加侧边栏？

/* Space out content a bit */ 
body { 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 
/* Everything but the jumbotron gets side spacing for mobile first views */ 
.header, 
.marketing, 
.footer { 
    padding-right: 15px; 
    padding-left: 15px; 
} 

/* Custom page header */ 
.header { 
    border-bottom: 1px; 
} 
/* Make the masthead heading the same height as the navigation */ 
.header h3 { 
    margin-top: 0; 
    margin-bottom: 0; 
    line-height: 40px; 
} 

/* Custom page footer */ 
.footer { 
    padding-top: 19px; 
    color: #777; 
    border-top: 1px solid #e5e5e5; 
} 

/* Customize container */ 
@media (min-width: 768px) { 
    .container { 
    max-width: 60%; 
    } 
} 
.container-narrow > hr { 
    margin: 30px 0; 
} 

.jumbotron { 
    border-bottom: 1px solid #e5e5e5; 
} 
.jumbotron .btn { 
    padding: 14px 24px; 
    font-size: 21px; 
} 

.marketing { 
    margin: 40px 0; 
} 
.marketing p + h4 { 
    margin-top: 28px; 
} 

@media screen and (min-width: 768px) { 
    /* Remove the padding we set earlier */ 
    .header, 
    .marketing, 
    .footer { 
    padding-right: 0; 
    padding-left: 0; 
    } 
    /* Space out the masthead */ 
    .header { 
    margin-bottom: 30px; 
    } 
    /* Remove the bottom border on the jumbotron for visual effect */ 
    .jumbotron { 
    border-bottom: 0; 
    } 
}

如何添加一个侧边栏？ max-width属性负责处理页面中心的主要内容。如何向双方添加内容？ Float：右键不能正常工作，它将内容浮动到中间内容的右侧，而不是页面的右侧。

来源

2014-09-24 haky_nash

知道没有标记的CSS有什么用处？创建一个jsfiddle？ – im1dermike 2014-09-24 18:28:43

请显示您尝试过的相关代码。 [Short，Self Contained，Correct（Compilable），Example]（http://sscce.org/） – showdev 2014-09-24 18:29:20

也许这只是我作为一个坚守者，但是你的页眉和页脚类不应该是ID吗？你只会在页面上有一个页眉和一个页脚，我不认为有必要将它们作为类。 – Manly 2014-09-24 18:30:11

我不确定是否通过边栏表示隐藏的菜单，或者只是右栏。

右栏：

<div id="rightColumn"> 
     stuff goes here... 
    </div>

和

div#rightColumn 
{ 
    float: right; 
    right: 15px; 
    width: 150px; 
}

...是一种方法。右列div在HTML正文中，不是里面的任何主内容区div;我怀疑你在里面，这会导致你看到的行为。

如果这是一个隐藏菜单，则需要使用Javascript;见http://semantic-ui.com/modules/sidebar.html#/examples。但是你没有将它作为标签，所以我假设你的意思是右列或左列。

来源

2014-09-24 18:38:44

如何添加侧边栏？

回答

相关问题