带有Bootstrap 4.6的jumbotron中的中心元素答案

【问题标题】：Center elements in jumbotron with Bootstrap 4.6带有Bootstrap 4.6的jumbotron中的中心元素
【发布时间】：2021-08-12 19:04:41
【问题描述】：

我需要达到这个结果，可能只使用 Bootstrap 4.6。我可以使用 v4.0 使该表单居中，但我无法使用 v4.6，所以我放弃了。

我尝试了许多我找到的解决方案，但没有一个达到结果。

这是我的代码：

<div class="container">
<div class="jumbotron">
    <h1 class="display-3">TITLE</h1>
    <p class="lead">Some Text</p>
    <hr class="my-2" />

    <form class="form-group col-4">
        <label for="exampleInputEmail1">Join the mailing list!</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">@</span>
            </div>
            <input type="email" class="form-control mr-2" placeholder="Your Email" id="user_email" name="your_email" /><button type="submit" class="btn btn-primary">Sign up</button>
        </div>
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </form>
</div>

【问题讨论】：

标签： bootstrap-4 centering

【解决方案1】：

只需将.mx-auto 添加到您的表单（将左右边距设置为自动）。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/>



<!-- CONTAINER HEAD -->
<div class="container text-center">
    <div class="jumbotron">
        <h1 class="display-3">TITLE</h1>
        <p class="lead">Some Text</p>

        <hr class="my-2" />

        <form class="form-group col-4 mx-auto">
            <label for="exampleInputEmail1">Join the mailing list!</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">@</span>
                </div>
                <input type="email" class="form-control mr-2" placeholder="Your Email" id="user_email" name="your_email" /><button type="submit" class="btn btn-primary">Sign up</button>
            </div>
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </form>
    </div>
</div>

【讨论】：

【解决方案2】：

我确实添加了我自己的课程form-signup 和margin:auto;

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/>

<style>
    .form-signup {
        margin: auto;
    }
</style>

<!-- CONTAINER HEAD -->
<div class="container text-center">
    <div class="jumbotron">
        <h1 class="display-3">TITLE</h1>
        <p class="lead">Some Text</p>

        <hr class="my-2" />

        <form class="form-group col-4 form-signup">
            <label for="exampleInputEmail1">Join the mailing list!</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">@</span>
                </div>
                <input type="email" class="form-control mr-2" placeholder="Your Email" id="user_email" name="your_email" /><button type="submit" class="btn btn-primary">Sign up</button>
            </div>
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </form>
    </div>
</div>

【讨论】：

【解决方案3】：

将这些类添加到.jumbotron d-flex flex-column align-items-center

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="align-items-center d-flex flex-column jumbotron">
    <h1 class="display-3">TITLE</h1>
    <p class="lead">Some Text</p>
    <hr class="my-2" />

    <form class="form-group col-4 m-auto">
        <label for="exampleInputEmail1">Join the mailing list!</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">@</span>
            </div>
            <input type="email" class="form-control mr-2" placeholder="Your Email" id="user_email" name="your_email" /><button type="submit" class="btn btn-primary">Sign up</button>
        </div>
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </form>
</div>

【讨论】：

我做了，但“hr”元素似乎消失了。