[英]Bootstrap 4 - Child automatically aligns center (vertically) when parent height is longer than child
I was using bootstrap 4 when I found this behaviour unexpected: 当我发现此行为异常时,我正在使用引导程序4:
https://jsfiddle.net/hzse8gfd/1/ https://jsfiddle.net/hzse8gfd/1/
In my fiddle, I have a sidebar which is stretched to screen's maximum height.I then have a 50px logo sitting on top of the sidebar, and a div that holds the rest of the sidebar content. 在我的小提琴中,我有一个延伸到屏幕最大高度的侧边栏,然后在侧边栏顶部有一个50px的徽标,还有一个div保留了侧边栏的其余内容。
What I realised is that the content gets vertically pushed down/align center of the parent height, when I am expecting it stick to the top, just like the logo segment. 我意识到,当我期望它像徽标段一样粘在顶部时,内容会垂直向下推/对齐父高度的中心。 Just curious why is the behavior as such.
只是好奇为什么这样的行为。
I'm using bootstrap 4 我正在使用Bootstrap 4
HTML: HTML:
<div id="sidebar" class="row">
<div class="col-12 logo">
</div>
<div class="col-12 sidebar-content">
<div class="row">
<ul id="sidebar-results">
<li>Result 1</li>
<li>Result 2</li>
<li>Result 3</li>
<li>Result 4</li>
<li>Result 5</li>
<li>Result 6</li>
<li>Result 7</li>
<li>Result 8</li>
</ul>
</div>
</div>
</div>
CSS: CSS:
.logo{
width:200px;
height:50px;
background-color:blue;
}
#sidebar{
height:100vh;
}
I found out it's because you use .col-12
twice in a single .row
, while total amount of columns should add up to 12
- your case: 24
. 我发现这是因为您在单个
.row
两次使用了.col-12
,而列的总数应该总计为12
您的情况是: 24
。
.logo{ width:200px; height:50px; background-color:blue; } #sidebar{ height:100vh; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div id="sidebar"> <!-- LOGO ROW --> <div class="row"> <div class="col-12 logo"></div> </div> <!-- RESULTS ROW --> <div class="row"> <div class="col-12 sidebar-content"> <ul id="sidebar-results"> <li>Result 1</li> <li>Result 2</li> <li>Result 3</li> <li>Result 4</li> <li>Result 5</li> <li>Result 6</li> <li>Result 7</li> <li>Result 8</li> </ul> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.