我试图使用Bootstrap 4创建一个类似于屏幕截图的布局，但是我遇到了一些问题使边栏固定，并在同一时间实现这种布局。
用一个基本的例子：
< div class =container>
< div class =row>
< div class =col-m-4id =sticky-sidebar>
侧边栏
< / div>
< div class =col-m-8id =main>
主要区域
< / div>
< / div>
有可能得到这个布局，但是一旦我声明：
.sidebar {
position：fixed // or absolute
}
code> 一旦我使侧边栏变得粘稠，主 div开始出现在后面边栏而不是旁边。当然，可以声明一些保证金，并将其恢复到原来的位置，但它使事情变得复杂，以提高响应能力。
我觉得我错过了一些东西，我读过Bootstrap 4文档，但我找不到一种简单的方法来实现这种布局。
>＃sticky-sidebar {position：fixed; max-width：20％;} < link href =https：//maxcdn.bootstrapcdn .com / bootstrap / 4.0.0-alpha.5 / css / bootstrap.min.cssrel =stylesheet/>< div class =container> < div class =row> < div class =col-xs-4> < div class =col-xs-12id =sticky-sidebar> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近使用包括版本的Lorem Ipsum在内的Aldus PageMaker等桌面出版软件而得到了推广。 < / DIV> < / DIV> < div class =col-xs-8id =main> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近使用包括版本的Lorem Ipsum在内的Aldus PageMaker等桌面出版软件而得到了推广。 < / DIV> < / div>< / div
I'm trying to create a layout like the screenshot using Bootstrap 4 but I'm having some problems with making the sidebar fixed and achieving this layout at the same time.
Going with a basic example:
<div class="container">
<div class="row">
<div class="col-m-4" id="sticky-sidebar">
Sidebar
</div>
<div class="col-m-8" id="main">
Main Area
</div>
</div>
</div
It's possible to get this layout but things get tricky once I declare:
.sidebar {
position: fixed // or absolute
}
Once I make the sidebar sticky, the main div starts appearing behind the sidebar instead of next to it. Of course it's possible to declare some margin and push it back to it's original position but it makes things complicated for responsiveness.
I feel like I'm missing something, I read the Bootstrap 4 documentation but I couldn't find a simple way to achieve this layout.
something like this?
#sticky-sidebar {
position:fixed;
max-width: 20%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="col-xs-12" id="sticky-sidebar">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="col-xs-8" id="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div这篇关于如何用Bootstrap 4创建固定的侧边栏布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！