Question

我正在尝试使用此Bootstrap 4登录表单。

https://startbootstrap.com/snippets/login/

我正试图找出解决这两个问题的方法。

我正在尝试更改.card-signin的不透明度，但是当我更改它时，它也会影响窗体和按钮。如何仅更改卡片的不透明度，而不更改其中的元素的不透明度？
如何将此卡垂直居中放置在屏幕中间？当我尝试使用垂直对齐的不同组合时，它显示在顶部？

Answer 1

在css下方添加，就一切就绪...

html,body,.container,.row {
    height: 100%;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
    align-items: center;
    display: flex;
}
.card.card-signin.my-5 {
    background-color: rgba(255, 255, 255, 0.6);
}

Answer 2

“ 如何在垂直居中的情况下将该卡垂直居中放置在屏幕中央？当我尝试使用垂直对齐方式尝试不同的组合时，该卡显示在顶部吗？” 重要！垂直中心相对于父级的高度

如果您要居中的元素的父级没有定义的高度，则所有垂直居中解决方案都将无效！

现在，进入Bootstrap 4的垂直居中...

您可以使用新的flexbox＆size实用程序使容器全高并显示：flex。这些选项不需要额外的CSS（除了容器的高度（即：html，body）必须为100％）。

选项1在flexbox子项上居中对齐

<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
 I'm vertically centered
</div>

enter link description here

选项2对齐项居中于flexbox父级（.row是display：flex; flex-direction：row）

<div class="container h-100">
<div class="row align-items-center h-100">
    <div class="col-6 mx-auto">
        <div class="jumbotron">
            I'm vertically centered
        </div>
    </div>
</div>

enter link description here

选项3在flexbox父项上对齐内容中心（.card为display：flex; flex-direction：column）

<div class="container h-100">
<div class="row align-items-center h-100">
    <div class="col-6 mx-auto">
        <div class="card h-100 border-primary justify-content-center">
            <div>
                ...card content...
            </div>
        </div>
    </div>
</div>

enter link description here

Answer 3

除了使用不透明度之外，您还可以尝试以下样式。

.card-body {
    background: rgba(255, 252, 252, 0.09);
}

Answer 4

在CSS下方尝试。

.card {
    background-color: rgba(255,255,255, 0.2) !important;
}

如何更改此Bootstrap 4卡的不透明度而又不影响其内部的形式和按钮？

4 个答案: