Question

使用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>

就像LifeHacker.com中的左栏一样您将看到左侧部分已固定，但我滚动页面。

我使用bootstrap v3.1.1

Answer 1

<div class="row">
    <div class="col-lg-3">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
       Normal data enter code here
    </div>
</div>

示例：bootply.com/101100

Answer 2

iterating over Ihab's answer, just using position:fixed and bootstraps col-offset you don't need to be specific on the width.

<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>

Answer 3

按照此处的解决方案http://jsfiddle.net/dRbe4/，

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

 </div>

我修改了一些css以完美地工作：

.fixed {
        position: fixed;
        width: 25%;
}
.scrollit {
        float: left;
        width: 71%
}

感谢@Lowkase分享解决方案。

Answer 4

在Bootstrap 3 class="affix"中有效，但在Bootstrap 4中则没有。我用class="sticky-top"在Bootstrap 4中解决了这个问题（在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>

Answer 5

使用它，适用于我并解决小屏幕问题。

<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>

Answer 6

已针对Bootstrap 4更新

Bootstrap 4现在包含一个position-fixed类，因此不需要其他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>

https://www.codeply.com/go/yOF9csaptw

Answer 7

使用引导程序4时，只需使用col-auto

<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>

Answer 8

使用 .col 代替 col-lg-3 :

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

Answer 9

如果你真的想这样做，你不能在“col-*”中这样做，因为它会相互重叠，你应该在父类“row”中这样做，但取决于什么你在做，你可能会遇到浏览器滚动的问题，会从屏幕上“剪切”，但是，解决起来很简单，只需控制列宽，一切都会好起来的。

<div class="row fixed-top h-100">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-9 overflow-auto h-100">
        Normal scrollable content
    </div>

</div>

Answer 10

这样做：

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

</div>

在引导程序中使列固定位置

10 个答案: