Question

Bootstrap文档中的一个非常基本的问题。到目前为止，一切似乎都有效，除了垂直对齐。在下面的图片中，您可以看到How it should be和How it appears in my browser ...感谢您提前获取任何帮助。

   <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>

Answer 1

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

.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

Bootstrap垂直对齐属性不起作用

1 个答案: