Bootstrap 4.6 中超大屏幕的中心元素

Question

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

我尝试了很多我找到的解决方案，但 none 实现了结果。

这是我的代码：

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

Answer 1

将这些类添加到 .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>

Answer 2

我确实添加了我自己的 class 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>

Answer 3

只需将 .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>

Bootstrap 4.6 中超大屏幕的中心元素

Center elements in jumbotron with Bootstrap 4.6

centering

bootstrap-4