引导右固定栏响应电网

我想创建这样的自举一个模板，它尊重网格的响应系统：引导右固定栏响应电网

在图片，导航栏和右侧（其包含两个按钮）粘滞（始终显示在视图上）

我的问题是右侧，因为在引导网格系统中，右侧块将被视为单行，而主要内容包含倍数行。我该怎么做？

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

引导右固定栏响应电网

回答

相关问题