垂直对齐使用Flexbox的

Question

想知道，如果你能帮助我与有关引导4这个令人沮丧的细节：

我使用https://v4-alpha.getbootstrap.com/layout/grid/#vertical-alignment这个页面的代码探索align-self-start Flexbox的对齐。但是，他们在示例中放入的代码不起作用。 是否有任何不是非常复杂的方式使它使用相似的术语？ 还是这一段代码完全无效现在：

<div class="container"> <div class="row align-items-start"> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> </div>

谢谢！

Answer 1

要实际上能够看到的区别，给row一个最低高度。

.row { 
 
    border: 1px solid red; 
 
    min-height: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row align-items-start"> 
 
    <div class="col"> 
 
     One of three 
 
    </div> 
 
    <div class="col"> 
 
     One of three 
 
    </div> 
 
    <div class="col"> 
 
     One of three 
 
    </div> 
 
    </div> 
 
    <div class="row align-items-center"> 
 
    <div class="col"> 
 
     One of three 
 
    </div> 
 
    <div class="col"> 
 
     One of three 
 
    </div> 
 
    <div class="col"> 
 
     One of three 
 
    </div> 
 
    </div> 
 
</div>