我在Wordpress主题中创建了一个新的模板文件template-home2.php。
在那里, 我有一行包含3列的行, 我想使这些列中的每一个都滚动而不是整个页面。我该如何实现?
我有一个可滚动的类, 该类可应用于页面的外部以使其可滚动。
<
section class="<
?php if( get_theme_mod( 'hide-player' ) == 0 ){ echo "w-f-md";
} ?>
" id="ajax-container">
<
section class="hbox stretch bg-black dker">
<
section>
<
section class="vbox">
<
section class="scrollable">
<
div class="row">
<
div class="col-md-5 no-padder no-gutter">
some data
<
/div>
<
div class="col-md-4 no-padder no-gutter">
some data
<
/div>
<
div class="col-md-3 no-padder no-gutter">
some data
<
/div>
<
/div>
<
/section>
<
/section>
<
/section>
<
/section>
<
/section>
【如何在Bootstrap中创建可滚动的列()】当我从主要部分中删除” 可滚动” 类并将其包括在div列中时, 该列消失, 其他2列在下面的元素上溢出。
这是相关的CSS
.scrollable {
overflow-x: hidden;
overflow-y: auto;
}
.no-touch .scrollable.hover {
overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
overflow: visible;
overflow-y: auto;
}
.slimScrollBar {
border-radius: 5px;
border: 2px solid transparent;
border-radius: 10px;
background-clip: padding-box !important;
}
感谢你的帮助。
更新的代码
.homecol1, .homecol2, .homecol3 {
position: absolute;
overflow-y: scroll;
}<
section class="<
?php if( get_theme_mod( 'hide-player' ) == 0 ){ echo "w-f-md";
} ?>
" id="ajax-container">
<
section class="hbox stretch bg-black dker">
<
section>
<
section class="vbox">
<
section class="scrollable">
<
div class="row">
<
div class="col-md-5 no-padder no-gutter homecol1">
some data
<
/div>
<
div class="col-md-4 no-padder no-gutter homecol2">
some data
<
/div>
<
div class="col-md-3 no-padder no-gutter homecol3">
some data
<
/div>
<
/div>
<
/section>
<
/section>
<
/section>
<
/section>
<
/section>
#1为此, 你首先需要为每个列提供一个类。然后, 你需要为其提供以下属性:
.your-class {
position: absolute;
overflow-y: scroll;
}
你可能还想让自己的身体溢出:隐藏;
请告诉我这是否可行, 否则, 我会进一步帮助!
编辑:创建了一个JSFiddle
https://jsfiddle.net/mjmwaqfp/2/
#2以下答案https://stackoverflow.com/a/53897001/11620296显示了引导程序4的解决方案, 它对我来说非常合适。它已经更新了演示https://www.codeply.com/go/ouc3hddx5i
代码如下:
html
<
div class="container-fluid h-100 d-flex flex-column">
<
div class="row flex-shrink-0">
<
div class="col-12 border">
Navbar <
/div>
<
/div>
<
div class="row flex-fill" style="min-height:0">
<
div class="col-2 border mh-100" style="overflow-y: scroll;
">
Sidebar <
/div>
<
div class="col-4 border mh-100" style="overflow-y: scroll;
">
Article list
<
p>
Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation.
Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.<
/p>
<
p>
Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb
readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.<
/p>
<
/div>
<
div class="col-6 border" style="overflow-y: scroll;
">
Article content <
/div>
<
/div>
<
div class="row flex-shrink-0">
<
div class="col-12 border">
Footer <
/div>
<
/div>
<
/div>
的CSS
html, body {
height: 100%;
}
推荐阅读
- 对于WP上已登录和已注销的用户,如何在标题菜单上使用不同的选项()
- 如何更改按钮的默认WordPress登录页面链接()
- 如何将导航标题菜单栏的背景颜色从一种颜色更改为两种颜色
- 将活动类添加到wordpress循环的第一项
- 在右键菜单中添加Beyond Compare合并技巧办法
- Beyond Compare比较文件跳转到编辑页面图文详细教程
- Beyond Compare文本编辑更改字体样式办法
- Beyond Compare合并页面代码图文详细教程
- 转转大师怎样将pdf转换成word?