Twitter bootstrap Bootstrap 4 flexbox中的固定和可滚动列
我花了好几个小时试图弄明白这一点，它似乎应该是如此简单。这个网页有点复杂，但问题归结起来就是这个 我试图在左边创建一个包含菜单的flex框，然后在右边创建一个“内容”框，我希望左边的框保持静止，右边的框上下滚动。然而，目前我只能让它垂直滚动Twitter bootstrap Bootstrap 4 flexbox中的固定和可滚动列,twitter-bootstrap,flexbox,bootstrap-4,Twitter Bootstrap,Flexbox,Bootstrap 4,我花了好几个小时试图弄明白这一点，它似乎应该是如此简单。这个网页有点复杂，但问题归结起来就是这个 我试图在左边创建一个包含菜单的flex框，然后在右边创建一个“内容”框，我希望左边的框保持静止，右边的框上下滚动。然而，目前我只能让它垂直滚动 @media (min-width: 768px) { #sidebar { position: fixed; top: 0; bottom: 0; } } 因此，我们采取了以下步骤 创建了“
@media (min-width: 768px) {
#sidebar {
position: fixed;
top: 0;
bottom: 0;
}
}
<div class="container-fluid">
<div class="row d-none d-md-block flex-nowrap wrapper boxtoview">
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/styles22.css">
</head>
<body>
<div class="container-fluid">
<div class="row d-none d-md-block flex-nowrap wrapper boxtoview">
<div class="col-md-4 float-left navstyle" id="sidebar">
<div class="top"></div>
<div class="navestylemenublock">
<ul class="menulevel1">
<li class="">
<a href="">Blog</a>
</li>
<li>
<a href="">Projects</a>
</li>
<li>
<a href="">Contact</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Search</a>
</li>
</ul>
</div>
</div>
<main class="col col-md-8 float-left col px-5 pl-md-2 pt-2 main mainview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem accumsan purus blandit rutrum eu in dui. Aenean ex enim, consectetur non cursus ut, luctus vestibulum orci. Maecenas non est non nisi porttitor fringilla. Nulla accumsan, turpis ut porta suscipit, diam nisl ullamcorper justo, ut pretium orci magna at tellus. Morbi id posuere justo. Praesent dictum pellentesque lectus, quis auctor massa malesuada in. Quisque ac pretium ex. Donec eget consequat ligula. Suspendisse feugiat sapien sit amet aliquam auctor. Donec dui sapien, feugiat nec condimentum sit amet, egestas sed mi. Donec odio tellus, suscipit at eleifend sit amet, eleifend cursus elit. Fusce libero elit, congue quis ligula ac, finibus facilisis mi. Aliquam mauris turpis, posuere vitae porttitor eu, lacinia id felis. Suspendisse hendrerit mollis arcu non placerat.
Praesent euismod dolor vel nibh condimentum, ut lacinia ex pellentesque. Vivamus aliquam, ex id sodales sodales, erat tortor tincidunt diam, quis posuere est mauris non ipsum. Ut consequat fermentum massa. Aliquam mollis, nibh ut varius faucibus, lacus leo lacinia nisi, vel maximus turpis erat non elit. Aenean quis ante non dolor sollicitudin feugiat eu ac est. Aenean fringilla ligula at est laoreet consectetur. Sed non egestas orci. Vivamus a sem ipsum. Duis et leo sit amet velit dapibus aliquam. Nullam ut eleifend nulla. Praesent metus mauris, dapibus eget posuere tincidunt, efficitur egestas erat. Praesent suscipit pellentesque venenatis. Duis ipsum metus, accumsan ac pulvinar ac, lacinia ac dolor. Vivamus dignissim mollis mauris a tempus.
Praesent condimentum porta velit, eget dapibus purus ultrices pellentesque. Nullam ultrices et massa sit amet congue. Praesent sollicitudin posuere odio, quis ullamcorper nisi tincidunt et. Cras et facilisis ipsum. Praesent eget nisi placerat, lobortis ante quis, interdum ligula. Aliquam rutrum urna a varius volutpat. Nulla ut tincidunt ipsum, congue feugiat lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus augue mi, venenatis ut interdum in, volutpat a dui. Etiam cursus diam orci, quis fermentum magna imperdiet commodo. Vivamus at lacus ut ante mollis luctus. Fusce sit amet convallis sem. Aliquam nibh nibh, consequat eget sagittis quis, volutpat ut risus.
Aenean porta nunc finibus, porta felis non, tempor justo. Quisque nec velit justo. Integer luctus ac massa vitae lobortis. Suspendisse tempor lobortis efficitur. Suspendisse potenti. Fusce at diam sem. Nullam ex purus, consequat id iaculis non, tincidunt a quam. Nullam interdum ut mi ut iaculis. Duis viverra tristique sodales.
Suspendisse et enim tortor. Proin molestie a velit eget cursus. Nunc nec ultricies lacus. Maecenas varius augue vitae mauris fringilla efficitur. Sed tempus ante vitae sollicitudin ornare. Sed vitae orci nulla. Morbi metus risus, aliquet et tristique sit amet, laoreet vestibulum neque. Duis interdum varius enim, quis maximus felis pharetra et. Aliquam est enim, vehicula id convallis quis, maximus sed nibh. Maecenas imperdiet rhoncus dolor sed imperdiet. Curabitur facilisis nisi et nulla blandit dapibus. Nam rhoncus vehicula ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</main>
</div>
</div>
</body>
</html>
引导4布局
Lorem ipsum dolor sit amet，是一位杰出的献身者。在酒后驾车时使用非sem accumsan purus blandit rutrum eu。埃涅阿斯·埃尼姆（Aenean ex enim）、非库斯特（Concertetur non cursus ut）、奥奇（luctus Ventabulum orci）。Maecenas non est non nisi porttitor fringilla。纳拉·阿库姆桑、图尔皮斯和苏西比特之门、迪亚姆尼斯·乌兰科珀·贾斯托、特卢斯的奥奇大教堂。Morbi id posuere justo。这句话的主旨是佩伦特斯·莱克托斯（Pellentesquel lectus），而拍卖人马萨·马莱苏阿达（massa malesuada）就在这里。这是一个很好的解释。苏丹迪丝·费吉亚·萨皮安坐在阿梅特·阿利奎姆拍卖行。多奈克·杜伊萨皮恩（Donec dui sapien），feugiat nec调味品坐在阿梅特（amet），egestas sed mi。Donec odio tellus，在eleifend坐着amet，eleifend cursus elit。自由精英、女性、女性、女性。Aliquam mauris turpis，posuere vitae porttitor eu，lacinia id felis。亨德雷特·莫利斯·阿库不动产鼠悬钩子。
这是一种很好的调味品，是一种很好的调味品。不平等的生活，不平等的生活，不平等的生活，不平等的生活，不平等的生活。这是一种发酵剂。阿利奎姆·莫利斯（Aliquam mollis）、尼布·瓦里乌斯·福西布斯（nibh ut varius faucibus）、拉齐尼亚·尼西（lacus leo lacinia nisi）、图尔皮斯（vel maximus turpis）和非精英。在欧盟的封建社会中，不允许任何形式的解决方案。埃尼安·弗林蒂利亚·利古拉（Aenean fringilla ligula）在东拉奥里特康塞特图（Laoret Concertetur）。塞德·非埃格斯塔斯·奥奇。Vivamus a sem ipsum。二人组和狮子组坐在一起。Nullam ut eleifend nulla。这是一个很好的例子。帕伦茨克威尼斯国家公园。双臀同侧臀，伏隔枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕枕。莫利斯·莫里斯·坦帕斯贵宾室。
Praesent调味品porta velit，eget dapibus purus ultrices pellentesque。乌尔特里斯和马萨坐在我的座位上。在奥迪奥的研究中，我们发现了一种新的治疗方法，即治疗和治疗。前额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额。芦苇木瓜。不属于自己，属于封建制度。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）。菲塞勒斯·奥古斯·米（Phasellus augue mi），维尼那提（venenatis）和英特杜姆（interdum），酒后驾车。它是一种巨大的发酵剂。在lacus ut ante mollis luctus的Vivamus。Fusce sit amet convallis sem。阿利夸姆·尼布·尼布，我的朋友，我的朋友。
埃尼安·努克·菲尼布斯之门、猫之门、临时之门。这是我的荣幸。整型luctus ac massa vitae lobortis。颞叶悬吊术。潜力悬钩子。直径扫描电镜下的Fusce。不可为他人所用，不可为他人所用，不可为他人所用。我和我之间没有任何分歧。杜伊斯·维韦拉·特里斯蒂克·索达莱斯。
中止和终止侵权行为。这是一个很好的例子。Nunc nec ultricies lacus。马塞纳斯葡萄品种奥古斯·维塔·莫里斯·弗林蒂利亚功效。这是一种特殊的生活节奏。塞德·维塔·奥奇·努拉。莫比·梅特斯·里苏斯、阿利奎特和特里斯蒂克·希特·阿梅特、拉奥里特·内克前庭。两种不同的动物，一种最大的猫科动物，另一种最大的猫科动物，另一种最大的动物。梅塞纳斯的饮食是不健康的。设施性库拉比酒店。Nam rhoncus Vehicle ante。虎口浮雕和肘部浮雕同侧前庭；根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。
Zim，你说得很对，意思是垂直的，至于浮点数，如果我把它去掉，列就会消失，或者我可以把它放在同一列中，这时第二个可以滚动……Zim，你说得很对，意思是垂直的，至于浮点数，如果我把它去掉，列就会消失，或者我可以把它放在同一列中，在这一点上，第二个可以滚动…对不起，不得不花一段时间来处理它，以使其正确（有一个需要清理的css ot），一些睡眠之间。非常感谢，它很有效，但感觉像是打破了Bootstrap4方法和FlexBox？（嘿，如果它能工作，我很高兴，但我认为这是我的问题的一部分）如果这些列上面没有任何内容，例如导航栏菜单，那么它就可以很好地工作。对那种情况有什么想法吗？我一直在尝试各种各样的方法。下面是您的“修复演示”的一个分支，展示了这个问题：--ThxSorry，不得不花一段时间来处理它以使其正确（有一大堆css需要清理），并且在这两者之间有一些睡眠。比
body {
background: #ffffff;
font-family: "Montserrat", sans-serif;
height: 100%;
overflow: hidden;
/*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
margin: 0px;
/*removes default style*/
display: flex;
/*enables flex content for its children*/ }
.navstyle {
font-family: "Cinzel", serif;
height: 100vh;
display: flex;
flex-direction: column;
flex-shrink: 0; }
.flex-grow {
flex: 1 0 auto; }
.mainview {
align-items: flex-start;
height: 100%;
/*allows both columns to span the full height of the browser window*/
display: flex;
flex-direction: column;
/*places the left and right headers above the bottom content*/
flex: 1;
overflow: scroll; }
.boxtoview {
min-height: min-content;
/* needs vendor prefixes */
display: flex;
}
body {
background: #ffffff;
font-family: "Montserrat", sans-serif;
height: 100%;
overflow: hidden;
/*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
margin: 0px;
/*removes default style*/
display: flex;
/*enables flex content for its children*/ }
.navstyle {
font-family: "Cinzel", serif;
height: 100vh;
display: flex;
flex-direction: column;
flex-shrink: 0; }
.flex-grow {
flex: 1 0 auto; }
.mainview {
align-items: flex-start;
height: 100%;
/*allows both columns to span the full height of the browser window*/
display: flex;
flex-direction: column;
/*places the left and right headers above the bottom content*/
flex: 1;
overflow: scroll; }
.boxtoview {
min-height: min-content;
/* needs vendor prefixes */
display: flex;
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/styles22.css">
</head>
<body>
<div class="container-fluid">
<div class="row d-none d-md-block flex-nowrap wrapper boxtoview">
<div class="col-md-4 float-left navstyle" id="sidebar">
<div class="top"></div>
<div class="navestylemenublock">
<ul class="menulevel1">
<li class="">
<a href="">Blog</a>
</li>
<li>
<a href="">Projects</a>
</li>
<li>
<a href="">Contact</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Search</a>
</li>
</ul>
</div>
</div>
<main class="col col-md-8 float-left col px-5 pl-md-2 pt-2 main mainview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem accumsan purus blandit rutrum eu in dui. Aenean ex enim, consectetur non cursus ut, luctus vestibulum orci. Maecenas non est non nisi porttitor fringilla. Nulla accumsan, turpis ut porta suscipit, diam nisl ullamcorper justo, ut pretium orci magna at tellus. Morbi id posuere justo. Praesent dictum pellentesque lectus, quis auctor massa malesuada in. Quisque ac pretium ex. Donec eget consequat ligula. Suspendisse feugiat sapien sit amet aliquam auctor. Donec dui sapien, feugiat nec condimentum sit amet, egestas sed mi. Donec odio tellus, suscipit at eleifend sit amet, eleifend cursus elit. Fusce libero elit, congue quis ligula ac, finibus facilisis mi. Aliquam mauris turpis, posuere vitae porttitor eu, lacinia id felis. Suspendisse hendrerit mollis arcu non placerat.
Praesent euismod dolor vel nibh condimentum, ut lacinia ex pellentesque. Vivamus aliquam, ex id sodales sodales, erat tortor tincidunt diam, quis posuere est mauris non ipsum. Ut consequat fermentum massa. Aliquam mollis, nibh ut varius faucibus, lacus leo lacinia nisi, vel maximus turpis erat non elit. Aenean quis ante non dolor sollicitudin feugiat eu ac est. Aenean fringilla ligula at est laoreet consectetur. Sed non egestas orci. Vivamus a sem ipsum. Duis et leo sit amet velit dapibus aliquam. Nullam ut eleifend nulla. Praesent metus mauris, dapibus eget posuere tincidunt, efficitur egestas erat. Praesent suscipit pellentesque venenatis. Duis ipsum metus, accumsan ac pulvinar ac, lacinia ac dolor. Vivamus dignissim mollis mauris a tempus.
Praesent condimentum porta velit, eget dapibus purus ultrices pellentesque. Nullam ultrices et massa sit amet congue. Praesent sollicitudin posuere odio, quis ullamcorper nisi tincidunt et. Cras et facilisis ipsum. Praesent eget nisi placerat, lobortis ante quis, interdum ligula. Aliquam rutrum urna a varius volutpat. Nulla ut tincidunt ipsum, congue feugiat lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus augue mi, venenatis ut interdum in, volutpat a dui. Etiam cursus diam orci, quis fermentum magna imperdiet commodo. Vivamus at lacus ut ante mollis luctus. Fusce sit amet convallis sem. Aliquam nibh nibh, consequat eget sagittis quis, volutpat ut risus.
Aenean porta nunc finibus, porta felis non, tempor justo. Quisque nec velit justo. Integer luctus ac massa vitae lobortis. Suspendisse tempor lobortis efficitur. Suspendisse potenti. Fusce at diam sem. Nullam ex purus, consequat id iaculis non, tincidunt a quam. Nullam interdum ut mi ut iaculis. Duis viverra tristique sodales.
Suspendisse et enim tortor. Proin molestie a velit eget cursus. Nunc nec ultricies lacus. Maecenas varius augue vitae mauris fringilla efficitur. Sed tempus ante vitae sollicitudin ornare. Sed vitae orci nulla. Morbi metus risus, aliquet et tristique sit amet, laoreet vestibulum neque. Duis interdum varius enim, quis maximus felis pharetra et. Aliquam est enim, vehicula id convallis quis, maximus sed nibh. Maecenas imperdiet rhoncus dolor sed imperdiet. Curabitur facilisis nisi et nulla blandit dapibus. Nam rhoncus vehicula ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</main>
</div>
</div>
</body>
</html>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-4" id="sidebar">
<div class="navestylemenublock sticky-top">
..
</div>
</div>
<main class="col col-sm-8">
.. content
</main>
</div>
</div>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-md-4" id="sidebar">
<div class="navestylemenublock">
<ul class="menulevel1">
..
</ul>
</div>
</div>
<main class="col-md offset-md-4">
...
</main>
</div>
</div>
@media (min-width: 768px) {
#sidebar {
position: fixed;
top: 0;
bottom: 0;
}
}