引導右固定欄響應電網

我想創建這樣的自舉一個模板，它尊重網格的響應系統：引導右固定欄響應電網

在圖片，導航欄和右側（其包含兩個按鈕）粘滯（始終顯示在視圖上）

我的問題是右側，因爲在引導網格系統中，右側塊將被視爲單行，而主要內容包含倍數行。我該怎麼做？

2016-09-21 Pierre Dommerc

你想要的側邊欄是12列（1個或2列寬），還是應該在12列的一樣寬，主要內容（是網格的一部分或部分不）？ _「右側方塊將被視爲單排」_：呃？你是說單列嗎？ – FelipeAls

是的，我希望我的邊欄成爲網格的一部分（1列寬）。 –

創建圍繞整個引導網格的包裝（容器>行> COLS ..）以包含固定NAV和右側欄。

<div class="wrapper"> 
     <!-- top nav --> 
     <nav> 
      ... 
     </nav> 

     <!-- main --> 
     <div class="left" id="main"> 
      <div class="container-fluid"> 
       <h1>Bootstrap Grid...</h1> 
      </div> 
     </div> 

     <!-- sidebar --> 
     <div class="right" id="sidebar"> 
      Fixed right sidebar 
     </div> 
</div>

http://www.codeply.com/go/37bttGte6c

來源

2016-09-21 14:33:50 ZimSystem

我不知道如果一個良好的響應式系統能夠在網格中構建一個包裝而不是在網格中構建它， –

在外部包裝中包含網格沒有任何問題。重要的是嵌套網格使用'container-fluid> row> cols' – ZimSystem

你可能他們分成各自<div>容器，例如：

<body> 
    <div class="navbar navbar-default"> Navbar </div> 

    <div class="main-content col-md-10"> Main Content </div> 

    <div class="right-btn-group col-md-2"> Right buttons </div> 
</body>

這樣，右側是從主要內容分離。然後我可能會誤解這個問題。

來源

2016-09-21 12:24:40 zureka

是的，但是用這種方法，右側的寬度是col類的witdh，並且不可能自定義此寬度？ –

如果您想要自定義列寬的格式，我建議您查看[此鏈接]（https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-still-might不知道），特別是「Custom Container Sizes」部分。 – zureka

好的，謝謝，我會的。 –

你在找這樣的嗎？您可以根據需要調整正確容器的寬度。無需編輯bootstrap.css或編寫自定義引導類。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <style> 
    body{ 
     width: 100%; 
     height: 100%; 
     color: #fff; 
    } 
    header, footer{ 
     height: 100px; 
    } 
    header{ 
     width: 100%; 
     background: #000; 
    } 
    .content-container{ 
     width: 100%; 
     position: relative; 
    } 
    .left-container{ 
     width: calc(100% - 90px); /* adjust */ 
     height: 100%; 
    } 
    .right-container{ 
     width: 90px; /* adjust */ 
     height: 100%; 
     position: absolute; 
     right: 0; 
     top: 0; 
     background: blue; 
    } 
    .main-content{ 
     height: 500px; 
     background: #ff0000; 
    } 
    footer{ 
     width: 100%; 
     background: #ed1899; 
    } 
    </style> 
</head> 
<body> 
<div class="container-fluid"> 
    <div class="row"> 

    <header class="nav">nav bar</header> 

    <div class="content-container"> 

     <div class="left-container"> 
     <div class="main-content"> 
      //main content 
     </div> 
     <footer> 
      //footer content 
     </footer> 
     </div> 

     <div class="right-container">buttons</div> 

    </div> 

    </div> 
</div> 
</body> 
</html>

來源

2016-09-21 13:21:56

引導右固定欄響應電網

回答

相關問題