Как центрировать форму в bootstrap 3

Question

Как центрировать форму в bootstrap 3

Как я могу центрировать свою форму входа ? Я использую bootstrap столбец, но он не работает.

вот мой код:

<div class="container">

    <div class="row">

        <div class="col-md-4 col-md-offset-6">

            <h2>Log in</h2>   

            <div>

                <table>

                    <tr>

                        <td>1</td>

                        <td>1</td>

                    </tr>

                    <tr>

                        <td>2</td>

                        <td>2</td>

                    </tr>

                    <tr>

                        <td>3</td>

                        <td>3</td>

                    </tr>

                 </table>

             </div> 

        </div>

    </div>

</div>

675 6

html css twitter-bootstrap twitter-bootstrap-3

6 ответов:

Comments

Ничего не найдено.

NoobEditor · Accepted Answer · 2013-12-31 08:47:47

простой способ добавить
.center_div{
    margin: 0 auto;
    width:80% /* value of your choice which suits your alignment */
}
вам класс .container.Добавить width:xx % к нему и вы получите идеально центрированный div!

например :
<div class="container center_div">
но я чувствую, что по умолчанию container находится в центре BS!

Sid · Accepted Answer · 2017-07-19 20:35:32

есть простой способ сделать это в Bootstrap. Всякий раз, когда мне нужно сделать div-центр на странице, Я разделяю все столбцы на 3 ( total bootstrap columns = 12, разделенный на 3 >>> 12/3 = 4). Деление на четыре дает мне три колонки. затем я поместил свой div в среднюю колонку. И вся эта математика выполняется таким образом:
<div class="col-md-4 col-md-offset-4">my div here</div>
col-md-4 делает один столбец из 4 столбцов начальной загрузки.Допустим, это главная колонка. col-md-offset-4 добавьте один столбец (шириной 4 столбца начальной загрузки) с обеих сторон главная колонна.

user2431058 · Accepted Answer · 2014-01-02 18:46:13

общее количество столбцов в строке должно составлять до 12. Таким образом, вы можете сделать col-md-4 col-md-offset-4. Таким образом, вы разбиваете свои столбцы на 3 группы по 4 столбца каждая. Прямо сейчас у вас есть форма с 4 столбцами со смещением на 6, поэтому вы получаете только 2 столбца в правой части своей формы. Вы также можете сделать col-md-8 col-md-offset-2, который даст вам форму столбца 8 с 2 столбцами каждый из пространства слева и справа или col-md-6 col-md-offset-3 (Форма столбца 6 с пространством столбцов 3 с каждой стороны), так далее.

Ammar · Accepted Answer · 2013-12-31 08:48:16

используйте центрированный класс со смещением-6, как показано ниже образца.
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
</div>

Surendher Raja · Accepted Answer · 2018-09-27 17:00:32

использовать d-flex на container класса, а затем добавить justify-content-center и align-items-center.

<div class="d-flex justify-content-center align-items-center container ">  
   <div class="row ">
        <form action="">
            <div class="form-group">
                <label for="inputUserName" class="control-label">Enter UserName</label>
                <input type="email" class="form-control" id="inputUserName" aria-labelledby="emailnotification">
                <small id="emailnotification" class="form-text text-muted">Enter Valid Email Id</small>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="control-label">Enter Password</label>
                <input type="password" class="form-control" id="inputPassword" aria-labelledby="passwordnotification">
            </div>
        </form>
    </div>
</div>

sujithuix · Accepted Answer · 2018-09-27 17:21:34

Я думаю, вы пытаетесь центрировать форму как по горизонтали, так и по вертикали относительно любого контейнера div.

вам не нужно использовать bootstrap для этого. Просто используйте популярный метод (ниже), чтобы центрировать форму.
.container{
 position relative;
}
.form{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}