it-swarm.com.ru

Центральная кнопка под формой в начальной загрузке

у меня есть некоторые проблемы с Bootstrap. Я центрировал форму и кнопку с помощью span6 offset3 и не знаю, как центрировать кнопку под этой формой прямо сейчас. Я попытался с text-align: center, но все же это больше слева.

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form>
                <input class="input-xxlarge" type="text" placeholder="Email..">
                <p style="line-height: 70px; text-align: center;"><button type="submit" class="btn">Confirm</button></p>
            </form>
        </div>
    </div>
</div>

11
Fastkowy

Удалите этот тег <p> и добавьте кнопку внутри <div class="form-actions"> следующим образом:

<div class="form-actions">
    <button type="submit" class="btn">Confirm</button>
</div>

затем увеличить класс CSS с помощью:

.form-actions {
    margin: 0;
    background-color: transparent;
    text-align: center;
}

Вот демонстрация JS Bin: http://jsbin.com/ijozof/2


Найдите form-actions в документе Bootstrap здесь:

http://Twitter.github.io/bootstrap/base-css.html#buttons

22
Leniel Maccaferri

В Bootstrap 3 вы можете использовать атрибут стиля 'text-center'.

<div class="col-md-3 text-center"> 
  <button id="button" name="button" class="btn btn-primary">Press Me!</button> 
</div>
12
Karl Gjertsen

Попробуйте добавить этот класс 

class="pager"

<p class="pager" style="line-height: 70px;">
    <button type="submit" class="btn">Confirm</button>
</p>

Я попробовал мой в <div class=pager><button etc etc></div>, который работал хорошо

Смотрите http://getbootstrap.com/components/ смотрите в разделе Нумерация страниц -> Пейджер

Это выглядит как правильный класс начальной загрузки для центрирования, text-align: center; предназначен для текста, а не изображений и блоков и т.д. 

1
user3257693

Я делаю это так <center></center>

<div class="form-actions">
            <center>
                    <button type="submit" class="submit btn btn-primary ">
                        Sign In <i class="icon-angle-right"></i>
                    </button>
            </center>
</div>
1
Moncho Chavez

Width:100% и text-align:center будут работать в моем опыте

<p style="display:block; line-height: 70px; width:100%; text-align:center; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>
1
Kevin Lynch

Используя Bootstrap, правильный способ - использовать класс смещения. Используйте математику, чтобы определить левое смещение. Пример: вам нужна кнопка полной ширины на мобильном устройстве, но на 1/3 ширины с центром на планшете, рабочем столе, большом рабочем столе.

Таким образом, из 12 столбцов «начальной загрузки» вы используете 4 для смещения, 4 для кнопки, а затем 4 пусто вправо.

Посмотрите, работает ли это!

0
Mitch McCoy

Это работает полностью, попробуйте это:

<div class="button pull-left" style="padding-left:40%;" >
0
chitra

Если вы используете Bootstrap 4 , попробуйте это:

<div class="mx-auto text-center">
    <button id="button" name="button" class="btn btn-primary">Press Me!</button>
</div>
0
Reeya Grace

С Bootstrap вы можете просто использовать класс text-center:

<div class="container">
    <div class="row">
        <form>
            <input class="input-xxlarge" type="text" placeholder="Email..">
        </form>

        <div class="text-center">
            <button type="submit" class="btn">Confirm</button>
        </div>
    </div>
</div>

ДЕМО

0
Legionar