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

查看：23
本文介绍了Bootstrap 垂直对齐属性不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

来自 Bootstrap 文档的一个非常基本的问题.到目前为止，一切似乎都奏效了，除了这个垂直对齐.在下面的图片中，您可以看到 应该如何 和 它在我的浏览器中的显示方式.

 
<div class="row"><div class="col align-self-start">三列之一
<div class="col align-self-center">三列之一

<div class="col align-self-end">三列之一

解决方案

垂直中心相对于高度.在您的示例中，所有同级列的高度相同 所以你不会看到对齐的任何变化.

要么 .row 需要有一个定义的高度，或者列中的一些内容会导致行有更多的高度.

<div class="row" style="height:180px"><div class="col align-self-start">三列之一
<div class="col align-self-center">三列之一

<div class="col align-self-end">三列之一

演示: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 you can see How it should be and 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>

解决方案

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆