Bootstrap摺疊側邊欄不隱藏到一邊

我的自舉代碼有問題。我試圖在移動設備上從右側進入側欄，幾乎完全像這裏：http://getbootstrap.com/examples/offcanvas/但我似乎無法使其工作。我也試圖讓左邊和右邊的箭頭之間的雪佛龍圖標發生變化，但即使我已經使用左側邊欄工作，它也不起作用。我的項目位於這裏，任何幫助讚賞piston.serverpit.com/bootstrap/main Bootstrap摺疊側邊欄不隱藏到一邊

編輯：我已經設法讓按鈕和行動工作正確，現在唯一的問題似乎是側邊欄本身放置在頁面的內容下，而不是到它的一面。我該如何解決？

Fiddle: http://jsfiddle.net/zauLh39y/

EDIT2：由從零開始與offcanvas例如有一個工作的例子，但是當我試圖把文章的代碼進入體內，然後它仍然打破...想法？似乎主要的問題是在CSS中設置側邊欄的最小寬度。 http://jsfiddle.net/xyd6ttbe/

來源

2014-12-02 xSpartanCx

SO需要的代碼* *在這裏。 – isherwood 2014-12-02 20:10:19

將您的代碼放在小提琴中 – BernieSF 2014-12-02 20:13:16

已更新爲代碼。 – xSpartanCx 2014-12-02 22:17:24

我設法解決它;主要的問題是強制側邊欄的寬度以及它最終被推到文章下面的原因是因爲<hr>標籤。

對於更新的代碼在這裏看到：http://jsfiddle.net/rwstwv0e/

來源

2014-12-04 14:13:06 xSpartanCx

根據您的外部例如，更新到這個

#sidebar{ 
    position: absolute; 
    /* no float, no left or right */ 
} 
.row-offcanvas-right { 
    left: 100%; /*instead of right xx...*/ 
} 
.row-offcanvas-right.active { 
    left: 50%; /*instead of right xx...*/ 
}

您可能需要更新寬屏幕模式的CSS，太。順便說一句：如果你在jsfiddle，codepen或者stackoverflow中提供了一個工作演示，它會更容易幫助你。

來源

2014-12-02 20:54:15 dsuess

這似乎不工作得很好。我遇到的問題是，當我縮小窗口時，側欄會移動到內容下方，然後一旦它被視爲移動設備，它將停留在底部。在我提出的問題中，當縮小窗口時，側邊欄完全消失，當您點擊切換側邊欄按鈕時，窗口大小不會改變（您不能向左或向右滾動），這正是我想要的。 – xSpartanCx 2014-12-02 22:04:47

Bootstrap摺疊側邊欄不隱藏到一邊

回答

相關問題