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

Posted 2023-03-06

【中文标题】在引导程序中使列固定位置

【英文标题】：Make column fixed position in bootstrap

【发布时间】：2014-03-19 01:58:39

【问题描述】：

使用 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中的左列一样 你会看到左边部分是固定的，但是我滚动页面。

我使用引导程序 v3.1.1

【问题讨论】：

@Lowkase 我根据请求附上了代码。

等待主题被取消“暂停”。与此同时，您可以在这里看到我的回答：jsfiddle.net/dRbe4。重新打开问题后，我可以更好地解释它。

【参考方案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>

【讨论】：

现在绝对是首选解决方案！

这在较小的屏幕上无法正常工作，右侧 div 将覆盖在包含 fixed div 的左侧 col 上

引导程序 4??任何想法

在 Bootstrap 4 中，将 'affix' 更改为 'sticky-top'

关于信息：Bootstrap 放弃了对 Bootstrap 4.0 词缀的支持。现在按照此处的建议使用“位置：粘性”：getbootstrap.com/docs/4.1/migration/#components

【参考方案2】：

迭代 Ihab 的答案，只需使用 position:fixed 和引导程序 col-offset 您不需要具体说明宽度。

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

【讨论】：

如果您更改列的位置，这将不起作用

这是一个更好的解决方案！工作完美，不需要 CSS。 @didando8a 如果您更改列位置，只需将 col-lg-offset 更改为新的偏移量。

如果有人还需要固定列的滚动能力，只需添加高度和溢出。例如style="position:fixed;height:100%;overflow-y:auto;".

@Roy "不需要 CSS" - 是的，它只是在样式标签中；)

这就是我需要的！请注意，Bootstrap 4 中的偏移量类是不同的，例如offset-lg-3。 getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

【参考方案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 分享解决方案。

【讨论】：

不指定宽度属性是否可以得到相同的结果？

我意识到这应该很明显，但我无法让它工作......我想要左侧的可滚动列和右侧的固定列。我的固定列中只有一个标签，但由于某种原因，当我设置这些类时，标签“粘”在左上角而不是在列中。我尝试了所有不同的样式属性组合，但均无济于事。将不胜感激指针:)

@ReidBelton 分享 Jsfiddle，以便我可以帮助您编写代码。

@IhabAbdel-Rahim 非常感谢您的提议！不过没必要，因为我已经搁置了这个项目。

我也这样做了，但是当我添加固定类时，它会消失。请帮忙。

【参考方案4】：

在 Bootstrap 3 class="affix" 中有效，但在 Bootstrap 4 中无效。 我在 Bootstrap 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>

【讨论】：

完美。 position-fixed 也用于使列粘在顶部，但是列的内容溢出了。 sticky-top 已修复。

【参考方案5】：

为 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

【讨论】：

如果我按照您的示例进行操作，则“col-lg-3”列的内容会超出其父级。很奇怪！ （尝试在其中添加更多文本）。一定是个bug……

这并不奇怪fixed position elements are removed from the normal DOM flow。这超出了原始问题的范围，但必须在固定元素上设置特定大小。

这会导致列相互重叠

在我的情况下，这是首选，因为定义位置：col-lg-3 div 的固定样式导致内部子元素的光标显示为默认值（而不是 fx.pointer） .

【参考方案6】：

使用这个，对我有用，解决小屏幕的问题。

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

【参考方案7】：

引导程序 5

解决方案是very similar to v4，但您可以使用带有.sticky-*-top 类的响应式变体。

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

文档：https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top

【参考方案8】：

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

【讨论】：

对我不起作用。两列都按预期滚动。

@star_trac 尝试添加一些 css，应该有帮助：.container-fluid flex: 1;

【参考方案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>

【参考方案10】：

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

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