如何添加側邊欄？

下面是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

如何添加側邊欄？

回答

相關問題