Bootstrap垂直对齐属性不起作用 [英] Bootstrap vertical align property not working

问题描述

Bootstrap文档中的一个非常基本的问题.到目前为止，一切似乎都奏效了，除了垂直对齐.在以下图像中，您可以看到应如何和

解决方案

垂直中心是相对于高度的.在您的示例中，所有同级列都是相同的高度 >，因此您不会看到对齐方式有任何变化.

.row需要具有定义的高度，或列中的某些内容会使行具有更高的高度.

<div class="container">
    <div class="row" style="height:180px">
        <div class="col align-self-start">
            One of three columns
        </div>
        <div class="col align-self-center">
            One of three columns
        </div>
        <div class="col align-self-end">
            One of three columns
        </div>
    </div>
</div>

演示: https://www.codeply.com/go/aCGgDtzhdY

A very basic question from the documentation of Bootstrap. Everything seemed to have worked so far, except this vertical alignment. In the following images u can see How it should be and How it appears in my browser... Thanks in advanced, for any help.

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

解决方案

Vertical center is relative to height. In your example, all of the sibling columns are the same height so you're not going to see any variation in alignment.

Either the .row needs to have a defined height, or some content in the columns causes the row to have more height.

<div class="container">
    <div class="row" style="height:180px">
        <div class="col align-self-start">
            One of three columns
        </div>
        <div class="col align-self-center">
            One of three columns
        </div>
        <div class="col align-self-end">
            One of three columns
        </div>
    </div>
</div>

Demo: https://www.codeply.com/go/aCGgDtzhdY

这篇关于Bootstrap垂直对齐属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！