Bootstrap pull-right не работает должным образом

простой вопрос здесь, используя Bootstrap3. Я хотел создать своего рода небольшой фильтр, который перезагружает страницу ниже. Моим требованием было выровнять этот фильтр (два входа и маленькая кнопка) с содержимым, сидящим под ним, заставляя его падать в самое правильное положение.

Я попытался с помощью pull-right класс и действительно вытащил фильтр, но еще больше места для заполнения. Если вы проверите пример, который я привел ниже, вы увидите, что моя цель состоит в том, чтобы выровнять кнопку с правой стороны фиолетовый строки, но это не удается.

Я действительно не понимаю, почему это происходит, но я предполагаю, что это связано с некоторыми проблемами маржи/заполнения строк.. Я ищу ответ, объясняющий, почему это происходит, чтобы я мог понять проблему и не буду заниматься ею снова :).

вы можете проверить мою разметку нажав здесь на bootply

также я опубликую свою разметку справа здесь:

<div class="container">
  <div class="row" style="background:slateblue;">
    <div class="col-xs-12">
    <form role="form" class="form-horizontal">
            <div class="form-group pull-right">
                 <div class="col-xs-4">
                        <input type="text" class="form-control text-center">
                </div>
                <div class="col-xs-4">
                        <input type="text" class="form-control text-center">
                </div>
                <div class="col-xs-2 col-sm-2" style="margin-top:3px;">
                        <button type="submit" class="btn btn-success">
                            <span class="glyphicon glyphicon-refresh"></span>
                        </button>
                </div>
            </div>
      </form>
      </div><!-- main col 12-->
  </div><!--row-->
  <div class="row" style="background:slategrey; height:200px;">
  </div>
</div>
7
css html twitter-bootstrap-3

4 ответов

ваша группа форм выровнена как можно дальше вправо, но содержимое внутри нее – нет. У вас есть только 4+4+2 широкие столбцы там, поэтому вы "два столбца короткие", в 12-столбцовой сетке, используемой bootstrap.

вы можете просто смещать первый из них на 2, добавив col-xs-offset-2 класс – то выравнивание должно быть ближе к тому, что вы хотите достичь.

4

для тех, кто использует bootstrap4:

классы для адаптивных поплавков и удалены .тяни-влево и .тяни вправо поскольку они избыточны .поплавок-влево и ...поплавок-вправо.

дополнительная информация из bootstrap4 migration notes:здесь

12

макет столбца начальной загрузки в основном разделит строку на 12 столбцов. Здесь вы определяете только 10 из двенадцати столбцов, поэтому у вас есть пространство слева справа.

попробовать

<div class="form-group pull-right">
                 <div class="col-xs-4 col-xs-offset-2">
                        <input type="text" class="form-control text-center">
                </div>
                <div class="col-xs-4">
                        <input type="text" class="form-control text-center">
                </div>
                <div class="col-xs-2 col-sm-2" style="margin-top:3px;">
                        <button type="submit" class="btn btn-success">
                            <span class="glyphicon glyphicon-refresh"></span>
                        </button>
                </div>
            </div>
4

Bootstrap использует сетку из 12 столбцов:

http://getbootstrap.com/css/#grid (стоит прочитать)

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

вот как я бы сделал ваш код:

<div class="container">
    <div class="row" style="background:slateblue;">
        <div class="col-xs-12">
            <form role="form" class="form-horizontal">
                <div class="form-group">
                     <div class="col-xs-5">
                            <input type="text" class="form-control text-center">
                    </div>
                    <div class="col-xs-5">
                            <input type="text" class="form-control text-center">
                    </div>
                    <div class="col-xs-2 col-sm-2" style="margin-top:3px;">
                            <button type="submit" class="btn btn-success">
                                <span class="glyphicon glyphicon-refresh"></span>
                            </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
-1