如何在Bootstrap 4中使列固定和向右滚动响应? [英] How to left column fixed and right scrollable in Bootstrap 4, responsive?
问题描述
我正在使用Angular 4,Bootstrap 4,并尝试实现固定的可滚动右div和固定的左div.它应该与 Trulia 的内容非常相似.
I'm using Angular 4, Bootstrap 4 and trying to implement a fixed scrollable right div and a fixed left div. It should very similar to what Trulia has.
Bootstrap在版本4中删除了Affix jQuery插件,因此该方法不再有效,他们建议使用位置:粘性,但我无法使其正常工作.
Bootstrap dropped the Affix jQuery plugin in version 4 so this method is not valid anymore, they recommend to use position: sticky, but I cant get it to work.
请帮助!
index.html
index.html
<div class="container-fluid">
<div class="row h-100">
<div class="col-md-6">
<div id="left-container">
<div class="search-property">
<input type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div id="right-container">
<app-home-right></app-home-right>
</div>
</div>
</div>
</div>
style.css
style.css
#left-container {
height: 100%;
position: fixed;
width: inherit;
}
#right-container {
position: absolute;
}
.search-property {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
margin-left: 50%;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.border {
border: 1px solid black;
}
推荐答案
我不确定您是只希望布局具有1个固定面,还是固定该面直到页脚(例如Trulia)固定.这是一个左侧固定的简单布局(拆分50 50).
I'm not sure if you simply want a layout with 1 fixed side, or for the side to be fixed until it reaches the footer (like Trulia). Here's a simple layout with fixed left side (Split 50 50).
body, html {
height: 100%;
}
#left {
position: fixed;
top: 0;
bottom: 0;
}
要仅在特定位置固定(固定)侧面,position:sticky
在所有浏览器上均无法很好地工作.我将按照此处的说明使用插件或polyfill:
To make the side fixed (or sticky) only at a specific point, position:sticky
doesn't work very well across all browsers. I'd use a plugin or polyfill as explained here: How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
更新Bootstrap 4.0.0 -fixed-top
类现在位于Bootstrap中,可以在左侧栏中使用该类以删除position:fixed
所需的多余的CSS.
Update Bootstrap 4.0.0 - The fixed-top
class is now in Bootstrap which can be used on the left side column to remove the extra css that was required for position:fixed
.
更新Bootstrap 4.1 -现在提供了h-100
类,它消除了height:100%
所需的额外CSS:
Update Bootstrap 4.1 - The h-100
class is now available which eliminates the extra CSS that was needed for height:100%
: https://www.codeply.com/go/ySC2l4xcEi
自适应-如评论中所述,可以使用媒体查询使布局自适应: https://www.codeply.com/go/pqzJB4thBY
Responsive - As mentioned in the comments, a media query can be used to make the layout responsive: https://www.codeply.com/go/pqzJB4thBY
相关:
在右侧固定了列
如何使用Bootstrap 4?
Related:
fixed col on right side
How to create a fixed sidebar layout with Bootstrap 4?
这篇关于如何在Bootstrap 4中使列固定和向右滚动响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!