it-swarm.com.ru

Как центрировать кнопки в Twitter Bootstrap 3?

Я создаю форму в Twitter Bootstrap, но у меня возникают проблемы с центрированием кнопки под входом в форме. Я уже пытался применить класс center-block к кнопке, но это не сработало. Как мне это исправить?

Вот мой код.

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>
225
Sam Bates

Заверните кнопку в div с классом «текст-центр».

Просто измените это:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

К этому: 

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

Правка

Начиная с BootstrapV4, center-block был отброшен # 19102 в пользу m-*-auto

506
Shekhar Pankaj

Согласно документации Twitter Bootstrap: http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

Все, что делает класс center-block, это сообщает элементу, что его поле имеет значение 0 auto, а auto - это левые/правые поля. Однако, если только класс text-center или css text-align: center; установлен на родительском элементе, элемент не знает точки для выполнения этого автоматического вычисления, поэтому не будет центрировать себя, как ожидалось.

Смотрите пример кода выше здесь: https://jsfiddle.net/Seany84/2j9pxt1z/

32
Seany84
<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>
29
obe6
<div class=container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>
8
Alexandre Pereira

добавить в свой стиль:

дисплей: таблица; поле: 0 авто;

5
benjamin

Я попробовал следующий код, и он работал для меня.

<button class="btn btn-default center-block" type="submit">Button</button>

Кнопка управления находится в div, и использование начальной загрузки класса с центральным блоком помогло мне выровнять кнопку по центру div

Проверьте ссылку, где вы найдете класс центральных блоков

http://getbootstrap.com/css/#helper-classes-center

5
Swapneel

Вы можете сделать это, задав маржу или разместив эти элементы абсолютно.

Например

.button{
  margin:0px auto; //it will center them 
}

0px будет сверху и снизу, а auto будет слева и справа.

3
user3443160

Обновление для Bootstrap 4:

Оберните кнопку набором div с помощью служебных классов 'd-flex' и 'justify-content-center', чтобы воспользоваться преимуществами flexbox.

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

Преимущество использования flexbox заключается в возможности добавления дополнительных элементов/кнопок на одной оси, но с их собственным отдельным выравниванием. Это также открывает возможность вертикального выравнивания с классами «align-items-start/center/end».

Вы можете обернуть ярлык и кнопку с другим элементом div, чтобы они совпали друг с другом.

например https://codepen.io/anon/pen/BJoeRY?editors=1000

2
Chris

использовать свойство text-align: center css

2
rsudip90

Это работает для меня Попытайтесь создать независимый <div>, затем поместите button в это . Просто так: 

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

Затем перейдите на страницу CSSStyle и введите код Text-align:center следующим образом:

#contactBtn{text-align: center;}
1
Mohi72

Вы можете сделать следующее. Это также позволяет избежать наложения кнопок.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>
1
Rusty

У меня была эта проблема. я использовал

<div class = "col-xs-8 text-center">

На моем элементе div, содержащем несколько строк h3, пару строк h4 и кнопку начальной загрузки…. Все, кроме кнопки, перескочило в центр после того, как я использовал text-center, поэтому я вошел в перезаписывающий загрузочный лист моего css-листа и дал кнопке

margin: auto;

который, кажется, решил проблему.

Это мой первый вклад здесь, и я надеюсь, что это поможет!

0
Ado Moshe

Для Bootstrap 3

мы делим пространство на столбцы, используем 8 маленьких столбцов (col-xs-8), оставляем 4 пустых столбца (col-xs-offset-4) и применяем свойство (center-block)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

Для Bootstrap 4

Мы используем Spacing, Bootstrap включает в себя широкий спектр служебных классов сокращенного и дополненного полей ответов, чтобы изменить внешний вид элемента . Классы именуются в формате {свойство} {сторон} - {размер} для xs и {свойство } {сторон} - {точка останова} - {размер} для sm, md, lg и xl.

больше информации здесь: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>
0
Gonen09