当我在 bootstarp 4 中使用 container-fluid 中的自定义类时，'row'中的 align-items 不工作？

问题描述 投票：-1回答：1

我刚刚开始学习前端开发，在学习了html5css3的基础知识后，转而学习bootstrap 4。现在，O一直想做一个facebook登录页面的副本，并使用了 container-fluid 为100%宽度，然后用 container 和 row 和 column 里面。为了与背景色相匹配，我在下面添加了一个自定义类 container-fluid 然后垂直对齐项目，我使用了 align-items-end 在 row. 但是，不知道为什么，它不工作；我一直在研究，但没有找到任何东西。下面是这两种情况的代码，请帮我了解一下是怎么回事，为什么以前不工作，现在为什么工作了？希望能得到帮助。谢谢。

<head>

    <!-- Charset -->
    <meta charset="utf-8">

    <!-- Responsive -->
    <meta name="viewport" content="width=device-width initial-scale=1.0 shrink-to-fit=no">

    <!-- styelsheets -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

    <style>
        .bg-fakebook {
            background-color: #3b5999 !important;
            min-height: 82px;
        }

        .fakebook-weight {
            font-family: Tahoma;
            font-weight: bold;
            color: white;
            margin: 0;
        }
    </style>

    <!-- Title -->
    <title>fakebook</title>

</head>

<body>
    <div class="container-fluid bg-fakebook">
        <div class="container">
            <div class="row align-items-end">
                <div class="col-md-6">
                    <h3 class="fakebook-weight">fakebook</h3>
                </div>
            </div>
        </div>
    </div>


    <!-- -------------------------------------------------------------
         JS files: jQuery first, then Popper.js, then Bootstrap JS
    --------------------------------------------------------------- -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"          integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>               <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"             integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

输出

然后，在尝试了很多东西之后，我加入了 bg-fakebook 到 row 以及哪些工作。

<div class="container-fluid bg-fakebook">
        <div class="container">
            <div class="row align-items-end bg-fakebook">
                <div class="col-md-6">
                    <h3 class="fakebook-weight">fakebook</h3>
                </div>
            </div>
        </div>
    </div>

输出

html css bootstrap-4 vertical-alignment
1个回答
0
投票

如果你想先对齐中间，你必须 display: flex 的父代。比添加对齐方式 top center or bottom...像这样 

<div class="container-fluid bg-fakebook d-flex align-items-center">
    <div class="container">
        <div class="row align-items-end">
            <div class="col-md-6">
                <h3 class="fakebook-weight">fakebook</h3>
            </div>
        </div>
    </div>
</div>

要学习bootstrap 4，你必须学会 屈曲 先。另外快乐学习。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.