具有右侧固定侧栏的Bootstrap响应式网格 [英] Bootstrap responsive grid with right fixed sidebar

问题描述

我想用这样的引导程序创建一个模板，该模板尊重网格的响应系统:

I would like to create a template with bootstrap like that, which respect the grid's responsive system :

在图片中，导航栏和右侧(包含两个按钮)很粘(始终显示在视图上)

In the picture, the navbar and the right side (which contains the two buttons) are sticky (always show on the view)

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

My problem is the right side because, in bootstrap grid system the right side block would be considered a single row while the main content contains multiples row. How I can do that ?

推荐答案

在整个Bootstrap网格(container> row> cols ..)周围创建一个包装器，以包含固定的导航栏和右侧栏.

Create a wrapper around the entire Bootstrap grid (container>row>cols..) to contain the fixed nav and right sidebar.

<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

这篇关于具有右侧固定侧栏的Bootstrap响应式网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！