Css 使柱在引导中处于固定位置

使用Bootstrap，我有一个网格列class=“col-lg-3”，我想将其放置在适当的位置：固定，而另一个。col-lg-9是正常位置（可在页面中滚动）

固定内容
普通可滚动内容

与中的左栏相同 你会看到左边的部分是固定的，但是我在页面上滚动

<div class="row">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>

</div>

---

我按照这里的解决方案使用bootstrap v3.1.1

---

感谢@Lowkase分享解决方案。

重复Ihab的答案，只需使用

位置：固定的
和引导
列偏移量
您不需要具体说明宽度

<div class="row">
    <div class="col-lg-3" style="position:fixed">
        Fixed content
    </div>
    <div class="col-lg-9 col-lg-offset-3">
        Normal scrollable content
    </div>
</div>


固定内容
普通可滚动内容

固定位置
正常数据在此输入代码
使用它，为我工作，解决小屏幕问题

<div class="row">
    <!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
    <div class="col-lg-3 device-lg visible-lg">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
    <!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
    <div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
       <div>
           NO fixed position
        </div>
    </div>
       Normal data enter code here
    </div>
</div>


固定位置
无固定位置
正常数据在此输入代码
在引导程序3中
class=“affix”
起作用，但在引导程序4中不起作用。
我用
class=“sticky top”
（在CSS中使用
position:fixed
有其自身的问题）

代码如下所示：

<div class="row">
    <div class="col-lg-3">
        <div class="sticky-top">
            Fixed content
        </div>
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>
</div>


固定内容
普通可滚动内容
为Bootstrap 4更新

Bootstrap 4现在包含一个固定位置的类，因此不需要额外的CSS

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="position-fixed">
                Fixed content
            </div>
        </div>
        <div class="col-lg-9">
            Normal scrollable content
        </div>
    </div>
</div>


固定内容
普通可滚动内容

使用bootstrap 4只需使用


固定内容
普通可滚动内容
使用.col代替col-lg-3：

<div class="row">
   <div class="col">
      Fixed content
   </div>
   <div class="col-lg-9">
      Normal scrollable content
   </div>
</div>


固定内容
普通可滚动内容
@Lowkase I为每个请求附加了代码。等待主题“暂停”。同时，你可以在这里看到我的答案：。重新打开问题后，我可以更好地解释它。如果不指定宽度属性，是否可能得到相同的结果？我意识到这应该是非常明显的，但我无法让它工作…我想要左侧的可滚动列和右侧的固定列。我的固定列中只有一个标签，但由于某种原因，当我设置这些类时，标签“粘贴”在左上角，而不是列中。我尝试了所有不同的样式属性组合，但都没有效果。如果您能给我一个指针，我将不胜感激：）@ReidBelton share JSFIDLE，这样我就可以帮助您编写代码了。@IhabAbdel Rahim非常感谢您的帮助！没有必要，因为我已经搁置了这个项目。我也这么做了，但是当我添加固定类时，它就消失了。请帮助。如果更改列的位置，则此操作无效。这是一个更好的解决方案！工作完美，无需CSS@didando8a如果您更改列位置，只需将col lg偏移量更改为新偏移量。如果有人还需要对固定列进行滚动，只需添加高度和溢出。e、 g.
style=“位置：固定；高度：100%；溢出-y:auto；”
@Roy“不需要CSS”-是的，只是在样式标签中；）这就是我需要的！注意：引导4中的偏移类不同，例如
offset-lg-3
。现在绝对是首选解决方案！这在较小的屏幕上无法正常工作，右div将位于包含
fixed
divbootstrap 4？？任何想法在Bootstrap 4中，请将“粘贴”更改为“Stick-top”以获取信息：Bootstrap放弃了对使用Bootstrap 4.0粘贴的支持。现在按照这里的建议使用“position:sticky”：如果我像您的示例中那样做，“col-lg-3”列的内容将从其父列中删除。真奇怪！（试着在这里面多放些文字）。这一定是一只虫子…它不像你想象的那么奇怪。这超出了原始问题的范围，但必须在固定元素上设置特定的大小。这会导致列彼此重叠，但在我的情况下，这是首选的，因为定义位置：col-lg-3 div的固定样式导致内部子元素的游标显示为默认值（而不是fx.pointer）.不适合我。两列都按预期滚动。@star\u trac尝试添加一些css，应该有帮助：
.container fluid{flex:1；}
Perfect<代码>位置固定
也有助于使列粘到顶部，但列的内容溢出<代码>粘性顶部

修复了该问题。

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="position-fixed">
                Fixed content
            </div>
        </div>
        <div class="col-lg-9">
            Normal scrollable content
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto">
            Fixed content
        </div>
        <div class="col-sm">
            Normal scrollable content
        </div>
    </div>
</div>

<div class="row">
   <div class="col">
      Fixed content
   </div>
   <div class="col-lg-9">
      Normal scrollable content
   </div>
</div>