2列引导div - 左应该固定在顶部，右边应该是可滚动的

Question

我正在尝试创建这样的布局：

我写了这样的HTML：

<div class="container">
       <div class="row">
    <div class="col-xs-12">
        <div class="row">
            <!-- Left side -->
            <div class="col-lg-3 col-md-3">
                <div class="row">
                   <div style="height:400px">
                     container of menu item, which should be fix on top   
                    <div>
                </div>
            </div>

            <!-- Right side -->
            <div class="col-lg-9 col-md-">
                <div class="row">
                   <div class="row">
                   <div style="height:900px">
                       Div Scrollable <div>
                </div>
                </div>
            </div>
        </div>
    </div>

我怎么能实现这个？请帮帮我

Answer 1

Bootstrap Affix可能正是您要找的。它是Bootstrap文档本身用于在页面滚动时将菜单固定在顶部的内容。

Answer 2

可能的方式之一：

HTML

<div class="container">
   <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <!-- Left side -->
                <div class="col-xs-3 clearfix" style="height:400px; background: #f00; position: fixed;">      
                        container of menu item, which should be fix on top   
                </div>                    
                <!-- Right side -->
                <div class="col-xs-offset-3 col-xs-9">
                    <div style="height:900px">
                        Div Scrollable 
                    <div>                            
                </div>
            </div>
        </div>
    </div>
</div>

+Fiddle

修改

我做了一个简单的演示来保持引导填充，你需要在左列内添加一个容器。