主页 / 问题 / 957952
Accepted
DamirFelix
Asked:2020-03-18 16:38:45 +0000 UTC2020-03-18 16:38:45 +0000 UTC

包裹在 div class="row" 中时表单布局中断 [关闭]

  • 772

我试图让表单水平和垂直居中。当您尝试将表单放入时，<div class="row"></div>布局会滑出。我不知道出了什么问题。我似乎在按照 Bootstrap 文档做所有事情。Codeply上的示例

html

1 个回答

  1. Best Answer

    UPD

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">Авторизация</div>
                    <div class="card-body">
                        <form>
                            <div class="form-group row">
                                <label for="inputLogin" class="col-form-label col-3 text-right">Логин</label>
                                <div class="col-9">
                                    <input type="text" class="form-control" id="inputLogin" placeholder="Введите логин" required autofocus>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="inputPassword" class="col-form-label col-3 text-right">Пароль</label>
                                <div class="col-9">
                                    <input type="password" class="form-control" id="inputPassword" placeholder="Введите пароль">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-1"></div>
                                <div class="col-lg-2">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="inputCheck">
                                        <label class="form-check-label" for="inputCheck">Запомнить меня</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3 offset-lg-1">
                                    <button type="submit" class="btn btn-outline-primary">Войти</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    这与行无关 - 您只是出于某种原因将标签和字段打包到大屏幕的窄列中（col-lg-1、col-lg-3）。在小屏幕上一切正常，但在大屏幕上它会压缩。

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">Авторизация</div>
                    <div class="card-body">
                        <form>
                            <div class="form-group row">
                                <label for="inputLogin" class="col-form-label col-lg-1 text-lg-right">Логин</label>
                                <div class="col-lg-3">
                                    <input type="text" class="form-control" id="inputLogin" placeholder="Введите логин" required autofocus>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="inputPassword" class="col-form-label col-lg-1 text-lg-right">Пароль</label>
                                <div class="col-lg-3">
                                    <input type="password" class="form-control" id="inputPassword" placeholder="Введите пароль">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-1"></div>
                                <div class="col-lg-2">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="inputCheck">
                                        <label class="form-check-label" for="inputCheck">Запомнить меня</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3 offset-lg-1">
                                    <button type="submit" class="btn btn-outline-primary">Войти</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    • 3

相关问题