Центрирование полей ввода Bootstrap

Я новичок в этом. Особенно с бутстрапом. У меня есть этот код:

<div class="row">
    <div class="col-lg-3">
       <div class="input-group">
         <input type="text" class="form-control">
         <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
       </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Мне нужно поместить это поле ввода и кнопку в центр страницы... "margin-left: auto; margin-right: auto;" не работал... у кого-то есть идея?

Ответ 1

Вы можете использовать смещения, чтобы колонка выглядела по центру, просто используйте смещение, равное половине оставшегося размера строки, в вашем случае я бы предложил использовать col-lg-4 с col-lg-offset-4, который (12-4)/2.

<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
            <input type="text" class="form-control" /> 
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div><!-- /input-group -->
    </div><!-- /.col-lg-4 -->
</div><!-- /.row -->

Демо-скрипт

Обратите внимание, что этот метод работает только для четных размеров столбцов (.col-X-2, .col-X-4, col-X-6 и т.д.)), если вы хотите поддерживать любой размер, вы можете использовать margin: 0 auto;, но вам нужно удалить float из элемента тоже, я рекомендую собственный CSS-класс, как показано ниже:

.col-centered{
    margin: 0 auto;
    float: none;
}

Демо-скрипт

Ответ 2

Попробуйте применить этот стиль к вашему div class="input-group":

text-align:center;

Посмотреть это: Fiddle.

Ответ 3

Лучший способ для центрирования вашего элемента использует .center-block вспомогательный класс. Но ваша версия бутстрапа должна быть не менее 3.1.1

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-3 center-block">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
    </div>
    <!-- /input-group -->
  </div>
  <!-- /.col-lg-6 -->
</div>
<!-- /.row -->

Ответ 4

Хорошо, это лучшее решение для меня. Bootstrap включает в себя мобильную первую систему флюидов, которая соответственно масштабирует до 12 столбцов при увеличении размера устройства или видового экрана. Так что это отлично работало в каждом браузере и устройстве:

        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div class="input-group">
                    <input type="text" class="form-control" /> 
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-4 -->
            <div class="col-lg-4"></div>
        </div><!-- /.row -->

Это означает, что 4 + 4 + 4 = 12... поэтому второй div будет посередине таким образом.

Пример: http://jsfiddle.net/jpGwm/embedded/result/

Ответ 5

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

.col-lg-3 {
  width: 100%;
}
.input-group {
   width: 200px; // for exemple
   margin: 0 auto;
}

если это не сработало! важно

Ответ 6

Для меня это решение хорошо работало, чтобы центрировать поле ввода в TD:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<td style="background:#B3AEB5;">
  <div class="form-group text-center">
    <div class="input-group" style="margin:auto;">
      <input type="month" name="p2" value="test">
    </div>
  </div>
</td>

Ответ 7

Для Bootstrap используйте justify-content-center.