Bootstrap固定側邊欄示例

Question

嘗試引導儀表板示例http://getbootstrap.com/examples/dashboard/

我的興趣主要在於使用其固定的側邊欄模板。 但有趣的是，當您切換到較小的視口時（如果是台式機，則較小的窗口屏幕），側邊欄及其內容會消失。

它真的隱藏嗎？ 還是即使在移動視圖中也可以查看側邊欄？ （嘗試在Chrome的調試模式下切換設備按鈕以查看移動視圖）

Answer 1

是的，默認樣式是隱藏的。 dashboard.css中的第33行。

Answer 2

它是設計使然，它們會隱藏移動設備的側邊欄或當屏幕尺寸很小時，才重視內容。 如果您想做這樣的事情而不會受到影響，則可以從以下開始：

 /* Start Praveen's Reset for Fiddle ;) */ * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* End Praveen's Reset for Fiddle ;) */ a {text-decoration: none;} html, body {height: 100%;} body {padding-top: 50px; padding-left: 75px;} p {margin: 0 0 10px;} header {background-color: #000; position: fixed; top: 0; width: 100%; z-index: 2; left: 0;} header h1 {line-height: 1; text-align: center; padding: 5px 0; font-weight: 1.5em;} header h1 a {font-weight: normal; color: #fff;} aside {position: fixed; left: 0; height: 100%; top: 30px; background-color: #99f; padding-top: 25px; z-index: 1; width: 70px;} 

 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <header> <h1><a href="">Heading</a></h1> </header> <aside> <nav> <ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </nav> </aside> <p>Jason John Gesser (born May 31, 1979) is an American college football coach and former player, currently the quarterbacks coach for the Wyoming Cowboys of the Mountain West Conference.</p> <p>He was previously the interim head coach, offensive coordinator, quarterbacks coach, and recruiting coordinator for the Idaho Vandals of the WAC. He played quarterback for Washington State Cougars of the Pac-10 under head coach Mike Price, and played in the 2003 Rose Bowl. As a professional, Gesser played for the Utah Blaze of the Arena Football League, the Calgary Stampeders of the Canadian Football League, and the Tennessee Titans of the National Football League. He was originally hired at Idaho as running backs coach in June 2011. Gesser is the grandson of Green Bay Packers Hall of Fame member Joseph "Red" Dunn.</p> <p>Jason John Gesser (born May 31, 1979) is an American college football coach and former player, currently the quarterbacks coach for the Wyoming Cowboys of the Mountain West Conference.</p> <p>He was previously the interim head coach, offensive coordinator, quarterbacks coach, and recruiting coordinator for the Idaho Vandals of the WAC. He played quarterback for Washington State Cougars of the Pac-10 under head coach Mike Price, and played in the 2003 Rose Bowl. As a professional, Gesser played for the Utah Blaze of the Arena Football League, the Calgary Stampeders of the Canadian Football League, and the Tennessee Titans of the National Football League. He was originally hired at Idaho as running backs coach in June 2011. Gesser is the grandson of Green Bay Packers Hall of Fame member Joseph "Red" Dunn.</p> 

Answer 3

是的，Anuj，它是隱藏的。 如果打開dashboard.css並轉到行號。 33您將找到以下代碼：

.sidebar {
  display: none;
}

如果將代碼從display:none更改為display:block則會在容器分區上方看到側邊欄。

但是，您確實希望在平板電腦或移動設備（我不建議您這樣做）等小型設備中使用該修復工具欄，您必須使用CSS並自己找到修復程序。 這是我做的

.sidebar{
    display:inline-block;
    float:left:
}

我正在上傳兩種情況的快照。 謝謝，吉米什

Answer 4

這是css響應屬性@mediaquery，您可以通過該屬性將規則應用於特定屏幕大小的元素。 即如果您檢查

@media (min-width: 768px)
.sidebar {
  /* other rules   */
  display: block;    //display on width more than 768px
 /* other rules   */
}

且寬度小於768px

.sidebar {
  display: none;  // it will hide the sidebar
}

Answer 5

您只能使用以下代碼通過CSS控制：

.navbar-fixed-top .sidebar {   display: inherit !important;}

否則，您將創建一個父ID並設置CSS相同格式

#id-name .sidebar {   display: inherit !important;}