为什么第二行的列不与第一行的列并排?
我所期待的-第二行列将并排的第一行列和其余页面的全宽。
例如:
侧边栏|主内容拉伸页面的其余部分
正在发生的事情:
侧边栏
第二栏
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-dark text-white" style="height: 100vh; width:250px;">
<div class="d-flex flex-column justify-content-start mb-3">
<div class="p-2 bg-primary">
Flex item 1
</div>
<div class="p-2 bg-danger flex-grow-1">
Flex item 2
</div>
<div class="p-2 bg-primary" style="position:fixed; bottom:0;">
Flex item 3
</div>
</div>
</div>
<div class="col bg-secondary text-white">
main body
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
编辑:尝试在侧栏列中进行垂直对齐。例如:
header <- start of div 1
button 1
button 2 <- end of div 1
images that will overflow and require scroll <- start of div 2
.
.
.
.
. <- end of div 2 would be on top of the start of div 3
text <- start/end of div 3
每当我尝试对齐div 3到底部或div 1到顶部或div 2在div 1之后我遇到问题
1条答案
按热度按时间ny6fqffe1#
我的第一直觉告诉我在第一列中有col-4,但在第二列中有:列。尝试添加列-4和列-8所以它填充这12列。默认从bootstrap网格。
记住使用DEV工具来查看每个类的css属性。