Як центрувати кнопки в 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>

Загорніть кнопку в 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

Згідно з документацією 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, причому автоматичне ліве / праве поле. Однак, якщо тільки текст-центр класу або css text-align: center; Встановлено на батьківському елементі, елемент не знає сенсу відпрацьовувати цей автоматичний розрахунок, тому не буде централізуватися як передбачалося.

Дивіться приклад коду вище тут: https://jsfiddle.net/Seany84/2j9pxt1z/

<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>

додати до свого стилю:

дисплей: стіл; маржа: 0 авто;

<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>

Ви можете зробити це, надавши маржу або абсолютно розташувавши ці елементи.

Наприклад

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

0px буде зверху та знизу, а автоматичне - зліва та справа.

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

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

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

Перевірте посилання, де ви знайдете клас центрального блоку

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

використовувати text-align: centerвластивість css

Оновлення для 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'.

Ви можете обмотати етикетку та кнопку іншим дівом, щоб вони були вирівняні один з одним.

наприклад https://codepen.io/anon/pen/BJoeRY?editors=1000

Ви можете зробити наступне. Це також дозволяє уникнути перекриття кнопок.

<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>

Це працює для мене, намагаюся зробити незалежним, <div>а потім покласти це buttonна те. просто так:

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

Потім перейдіть на сторінку CSSстилю і зробіть Text-align:centerтак:

#contactBtn{text-align: center;}

Для Bootstrap 3

розділяємо простір стовпцями, використовуємо 8 невеликих стовпців (col-xs-8), залишаємо 4 порожні стовпці (col-xs-offset-4) і застосовуємо властивість (центр-блок)

<!--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>

Для завантажувальної програми 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>

У мене була ця проблема. я використав

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

На моєму діві, що містить кілька рядків h3, пару ліній h4 та кнопку Bootstrap. Все, окрім кнопки, стрибнуло до центру після того, як я скористався текстовим центром, тому я зайшов у свій CSS аркуш, що переосмислює Bootstrap, і дав кнопку

margin: auto;

що, здається, вирішило проблему.

або ви можете надати конкретні зсуви, щоб зробити положення кнопок там, де ви хочете, просто за допомогою сітки для завантаження,

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

таким чином, також ви можете вказати розмір кнопки, якщо встановити btn-block. впевнений, це буде працювати лише діапазон розмірів md, якщо ви хочете встановити й інші розміри, використовуйте xs, sm, lg.