Как мне настроить кнопки Twitter Bootstrap для выравнивания по правому краю?


452

У меня есть простая демонстрация здесь:

http://jsfiddle.net/HdeZ3/1/

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

У меня есть неупорядоченный список, и для каждого элемента списка я хочу, чтобы текст располагался слева, а затем выровненная по правому краю кнопка. Я пытался использовать pull-right, но это полностью портит выравнивание. Что я делаю неправильно?


5
Почему этот вопрос помечен как twitter-bootstrap-3 и twitter-bootstrap-2, а также twitter-bootstrap ?
Эндрю Гримм

5
Потому что это актуально для всех версий с 3/2013
Zim

Ответы:


693

Вставьте pull-rightв атрибут класса и позвольте загрузчику расположить кнопки.

Для Bootstrap 2.3 см .: http://getbootstrap.com/2.3.2/components.html#misc > Вспомогательные классы> .pull-right.

Для Bootstrap 3 см .: https://getbootstrap.com/docs/3.3/css/#helper-classes > Вспомогательные классы.


Для Bootstrap 4 см. Https://getbootstrap.com/docs/4.0/utilities/float/#responsive.

Команда pull-rightбыла удалена и заменена float-rightили вообщеfloat-{sm,md,lg,xl}-{left,right,none}


18
Я не понимаю этот ответ. В вопросе пример кода уже используется pull-right.
Гиваль

@ guival Мне было интересно то же самое. stackoverflow.com/a/26546770/470749 подразумевает, что использование buttonвместо inputбудет иметь значение.
Райан

@ Райан, это работает на меня, как на входе, так и на кнопке
Lesther

@aronadaal Это работа для меня, спасибо!
Хуари Зегай

249

В твиттере bootstrap 3 попробуй класс pull-right

class="btn pull-right"


9
+1 для выделения изменений. Но эта амортизация только для выпадающего меню, которое было заменено на .dropdown-menu-right. Его не осуждали в целом.
Шон Вейдер

Вы правы, документация гласитwe've deprecated .pull-right on dropdown menus
ılǝ

3
Я должен был использовать pull-right во внешнем элементе btn-group div: <div class = "btn-group pull-right">
Герфрид

17
pull-rightиспользует float: right, тем самым сворачивая вертикальное содержимое друг на друга. Оберните кнопку с text-rightDIV, как это -<div class="text-right">button...</div>
hashbrown

137

Класс «pull-right» может быть неправильным, потому что он использует «float: right» вместо text-align.

Проверяя файл начальной загрузки 3 css, я нашел класс «text-right» в строке 457. Этот класс должен быть правильным способом для выравнивания текста вправо.

Некоторый код:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>


6
Я думаю, что это лучше, чем тянуть вправо, потому что это предотвращает свертывание вертикального содержимого друг на друга и избавляет от необходимости добавлять больше разметки, чтобы обойти это.
Тони Уолл

2
Спасибо. Проблема с «pull-right» заключается в том, что он удаляет любые поля с кнопок. Это поддерживает поля, но перемещает элементы вправо. Отлично!
пиар Уайтхеда

Почему text-right должно быть в div, связывающемся с этой кнопкой, а не просто class="btn btn-default text-right"с кнопкой ???
Кристиан Польска

50

Обновление 2019 - Bootstrap 4.0.0

pull-rightКласс теперь float-rightв Bootstrap 4 ...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

Также лучше не выравнивать список ul и использовать блочные элементы для строк.

Все float-rightеще не работает?

Помните, что Bootstrap 4 теперь является flexbox , и многие элементы display:flexмогут помешать работе float-right. В некоторых случаях утилитные классы любят align-self-endили ml-autoработают, чтобы выровнять по правому краю элементы, которые находятся внутри контейнера flexbox, такие как Bootstrap 4 .row, Card или Nav.

Также помните, что text-rightвсе еще работает на встроенных элементах.

Bootstrap 4 выравнивает правильные примеры


Bootstrap 3

Используйте pull-rightкласс.


Они работают на меня, но вам не нужно полагаться на ссылки. Прочитайте ответ для объяснения того, как правильно выровнять.
Зим

19

Используйте buttonтег вместо inputи используйте pull-rightкласс.

pull-right class полностью испортил обе ваши кнопки, но вы можете это исправить, определив настраиваемое поле справа.

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

Затем используйте следующий CSS для класса

.RbtnMargin { margin-left: 5px; }

18

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

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

В качестве альтернативы, добавьте все ваши столбцы к общему количеству столбцов сетки (по умолчанию 12) вместе со смещением первого столбца.

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

12

Извините за ответ на старый уже отвеченный вопрос, но я подумал, что укажу несколько причин, по которым ваш jsfiddle не работает, в случае, если другие проверит его и спросят, почему класс pull-right, как описано в принятом ответе, не не работать там.

  1. URL-адрес файла bootstrap.css недействителен. (возможно, это сработало, когда вы задали вопрос).
  2. Вы должны добавить атрибут: type = "button" к вашему элементу ввода, иначе он не будет отображаться как кнопка - он будет отображаться как поле ввода. Еще лучше, используйте <button>вместо этого элемент.
  3. Кроме того, поскольку функция pull-right использует плавающие элементы, вы получите некоторое колебание макета кнопки, поскольку у каждого LI недостаточно высоты, чтобы соответствовать высоте кнопки. Добавление некоторой высоты строки или минимальной высоты css к LI решит эту проблему.

рабочая скрипка: http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(Я также добавил минимальную ширину к кнопкам, поскольку я не мог выдержать вид изрезанного и выровненного по правому краю кнопок из-за разной ширины :))


11

Использование pull-rightпомощника Bootstrap у нас не сработало, потому что оно использует float: right, что заставляет inline-blockэлементы становитьсяblock . И когда они .btnстановятся block, они теряют естественную границу, которая inline-blockпредоставляла их как квази-текстовые элементы.

Таким образом, вместо этого мы использовали direction: rtl;родительский элемент, который приводит к расположению текста внутри этого элемента справа налево, а также inline-blockк расположению элементов справа налево. Вы можете использовать LESS, как показано ниже, чтобы не допустить раскладки детей rtl:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

и используйте это как:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

7

В Bootstrap 4 : попробуйте этот способ с Flexbox. Смотрите документацию в getbootstrap

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>




2

Можете ли вы попробовать собственный CSS в стороне от загрузочного CSS, чтобы увидеть, есть ли изменения. Пытаться

.move-rigth{
    display: block;
    float: right;
}

Если это работает, тогда вы можете попробовать манипулировать тем, что у вас есть, или добавить к этому другое форматирование и достичь желаемого. Потому что вы используете bootstrap, это не значит, что если он не предлагает вам то, что вы хотите, вы просто управляете им. Вы работаете со своими кодами, и поэтому вы приказываете делать это, как вы говорите. Ура!


5
не нужно настраивать CSS, так как другой ответ показывает, что все необходимое включено в загрузчик
chrisweb

@chrisweb Что делать, если у вас есть другие плагины с таким же неизвестным вам классом CSS и конфликтующими проблемами? Сидеть и смотреть, чем создать собственный CSS и двигаться дальше? OP никогда не указывал, были ли добавлены какие-либо другие плагины, которые могли бы использовать те же классы CSS
OmniPotens

2
<ul>
    <li class="span4">One <input class="btn btn-small" value="test"></li>
    <li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>

я просто использовал макет .. применить стили для ли ..

или

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

в CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

Для меня это помещает оба элемента списка в одну строку
deltanovember

2

Вы также можете использовать пустые столбцы, чтобы оставить пробелы слева

подобно

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

Демо :: Jsfiddle demo


1

Начиная с Bootstrap V3.3.1, следующий стиль CSS решит эту проблему

.modal-open{
    padding-right: 0 !important;
}

Примечание: я попробовал все предложения в постах выше и все адреса более старых версий и не предоставляю исправления для новых версий начальной загрузки.


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.