Question

我想横向居中登录表单，它以移动设备为中心，但我无法弄清楚如何在监视器屏幕上实现相同目的。我正在使用Bootstrap 3。

<div class="container-fluid main-container">
        <h2>Login</h2>
        <form action="/action_page.php">
            <div class="form-group row">
                <div class="col-sm-3">
                    <label for="email">Username:</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter your email" name="email">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-3">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
                </div>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="remember"> Remember me</label>
            </div>
            <div class="form-group row">
                <div class="col-sm-3">
                    <button type="submit" class="btn btn-default btn-block">Submit</button>
                </div>
            </div>
        </form>
    </div>

Answer 1

设置容器以显示flex并使用justify-content和align-items这样的

.container-fluid {
    display: flex;
    justify-content: center;
    align-items: center;
}

这是一个css解决方案我不认为你可以用bootstrap来实现这个目标

Bootstrap中心div垂直

1 个答案: