Question

当我发现此行为意外时，我正在使用bootstrap 4：

在我的小提琴中，我有一个侧边栏，它被拉伸到屏幕的最大高度。然后我在侧边栏的顶部放置了一个50px的徽标，以及一个保留侧边栏内容的div。

我意识到内容会垂直向下推/对齐父高度的中心，当我期望它坚持到顶部时，就像徽标片段一样。只是好奇为什么这样的行为。

我正在使用bootstrap 4

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：

.logo{
  width:200px;
  height:50px;
  background-color:blue;
}

#sidebar{
  height:100vh;
}

Answer 1

我发现它是因为您在一个.col-12中使用.row两次，而列总数应该加起来12 - 您的情况：{{1 }}

＆＃13;

.logo{
  width:200px;
  height:50px;
  background-color:blue;
}

#sidebar{
  height:100vh;
}

＆＃13;

Bootstrap 4 - 当父级高于子级时，子级自动对齐居中（垂直）

1 个答案: