当前位置: 首页 > 面试题库 >

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

池阳伯
2023-03-14
问题内容

使用Bootstrap,我有一个网格列class =“ col-lg-3”,我希望将其放置在position:fixed上,而其他.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


问题答案:

按照此处的解决方案,

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



 类似资料:
  • 问题内容: 好的,我注意到了一些东西,但是在CSS规范中找不到。样式化元素将相对于浏览器视口绝对定位。如果将固定位置的元素放置在另一个元素内会怎样?CSS示例如下: 和HTML: 据我所知,该元素相对于其最近的父元素也是固定位置的。这在所有浏览器中都可以使用吗?另外,它是错误还是故意行为? 到目前为止,我在互联网上没有找到关于此主题的任何内容,只是“固定位置使其固定在页面上”。 问题答案: 固定和

  • 我有一个问题,在一个列的居中行。下面是我的html的样子: 我曾试图: 有什么其他的想法,如何或可能为什么我不能集中或保持回应?

  • 问题内容: 是否可以在Mobile Safari中相对于视口定位固定的元素?正如许多人所指出的那样,这是行不通的,但是Gmail只是提供了几乎是我想要的解决方案-在邮件视图中查看浮动菜单栏。 在JavaScript中获取实时滚动事件也是一种合理的解决方案。 问题答案: iOS 5 支持position:fixed

  • 问题内容: 是否可以在Mobile Safari中相对于视口定位固定的元素?正如许多人所指出的那样,这是行不通的,但是Gmail只是提供了几乎是我想要的解决方案-请在邮件视图中查看浮动菜单栏。 在JavaScript中获取实时滚动事件也是一种合理的解决方案。 问题答案: 这个固定位置的div可以仅用两行代码来实现,该代码将div滚动移动到页面底部。

  • 我已经开始学习Bootstrap了。我的问题是如何中心对齐一个列水平,引导包含12列布局,没有中间数字。更清楚的是,如果是11列布局,中间的数字应该是6(左5列,中间1列,右5列)

  • 本文向大家介绍Fullpage.js固定导航栏-实现定位导航栏,包括了Fullpage.js固定导航栏-实现定位导航栏的使用技巧和注意事项,需要的朋友参考一下 FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站)。除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果。能够自适应不同的屏幕尺寸,包括平板电脑和移动设备。 开始制作自己的个人简历啦,决