ブートストラップ4 - 子供は自動的に親の高さはもう子供

Question

よりあるとき、私は、この動作が予期しない見つけたとき、私は、ブートストラップ4を使用していた（縦方向）の中心を揃え：私のバイオリンで

https://jsfiddle.net/hzse8gfd/1/

を、私はどのサイドバーを持っています画面の最大高さに引き伸ばされています。サイドバーの上に50pxのロゴを、サイドバーの残りの部分を保持するdivを作成します。

私が気づいたのは、コンテンツが垂直方向に押し下げられる/親の高さの中心が、ロゴセグメントのように上部に貼り付けることを期待しているときです。ちょうど興味があるのはなぜそのような振る舞いです。私は、ブートストラップ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：私は見つけたあなたは、単一の.rowで二回.col-12を使用しているため、それは、だ

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

#sidebar{ 
    height:100vh; 
} 

Answer 1

の総量中列は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>