У меня есть простая демонстрация здесь:
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" value="test2"></li>
</ul>
У меня есть неупорядоченный список, и для каждого элемента списка я хочу, чтобы текст располагался слева, а затем выровненная по правому краю кнопка. Я пытался использовать pull-right, но это полностью портит выравнивание. Что я делаю неправильно?
Ответы:
Вставьте
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}
источник
pull-right
.button
вместоinput
будет иметь значение.В твиттере bootstrap 3 попробуй класс pull-right
источник
we've deprecated .pull-right on dropdown menus
pull-right
используетfloat: right
, тем самым сворачивая вертикальное содержимое друг на друга. Оберните кнопку сtext-right
DIV, как это -<div class="text-right">button...</div>
Класс «pull-right» может быть неправильным, потому что он использует «float: right» вместо text-align.
Проверяя файл начальной загрузки 3 css, я нашел класс «text-right» в строке 457. Этот класс должен быть правильным способом для выравнивания текста вправо.
Некоторый код:
источник
class="btn btn-default text-right"
с кнопкой ???Обновление 2019 - Bootstrap 4.0.0
pull-right
Класс теперьfloat-right
в Bootstrap 4 ...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
класс.источник
Используйте
button
тег вместоinput
и используйтеpull-right
класс.pull-right
class полностью испортил обе ваши кнопки, но вы можете это исправить, определив настраиваемое поле справа.Затем используйте следующий CSS для класса
источник
В дополнение к принятому ответу, работая с контейнерами и столбцами, в которых есть встроенные отступы из начальной загрузки, у меня иногда есть полностью растянутый столбец с дочерним элементом div, который выполняет тягу, чтобы идти вперед.
В качестве альтернативы, добавьте все ваши столбцы к общему количеству столбцов сетки (по умолчанию 12) вместе со смещением первого столбца.
источник
Извините за ответ на старый уже отвеченный вопрос, но я подумал, что укажу несколько причин, по которым ваш jsfiddle не работает, в случае, если другие проверит его и спросят, почему класс pull-right, как описано в принятом ответе, не не работать там.
<button>
вместо этого элемент.рабочая скрипка: http://jsfiddle.net/3ejqufp6/
(Я также добавил минимальную ширину к кнопкам, поскольку я не мог выдержать вид изрезанного и выровненного по правому краю кнопок из-за разной ширины :))
источник
Использование
pull-right
помощника Bootstrap у нас не сработало, потому что оно используетfloat: right
, что заставляетinline-block
элементы становитьсяblock
. И когда они.btn
становятсяblock
, они теряют естественную границу, котораяinline-block
предоставляла их как квази-текстовые элементы.Таким образом, вместо этого мы использовали
direction: rtl;
родительский элемент, который приводит к расположению текста внутри этого элемента справа налево, а такжеinline-block
к расположению элементов справа налево. Вы можете использовать LESS, как показано ниже, чтобы не допустить раскладки детейrtl
:и используйте это как:
источник
В Bootstrap 4 : попробуйте этот способ с Flexbox. Смотрите документацию в getbootstrap
источник
Правая тяга устарела с версии 3.1.0. Просто один на один.
http://getbootstrap.com/components/#callout-dropdown-pull-right
источник
pull-right
не рекомендуетсяdropdown-menu
. Это может все еще использоваться для других компонентов.Применить
pull-right
класс для кнопки. http://getbootstrap.com/css/#helper-classes-floats -> Вспомогательные классыЭта ссылка поможет
источник
Теперь вам нужно добавить .dropdown-menu-right к существующему элементу .dropdown-menu. pull-right больше не поддерживается. Более подробная информация здесь http://getbootstrap.com/components/#btn-dropdowns
источник
Можете ли вы попробовать собственный CSS в стороне от загрузочного CSS, чтобы увидеть, есть ли изменения. Пытаться
Если это работает, тогда вы можете попробовать манипулировать тем, что у вас есть, или добавить к этому другое форматирование и достичь желаемого. Потому что вы используете bootstrap, это не значит, что если он не предлагает вам то, что вы хотите, вы просто управляете им. Вы работаете со своими кодами, и поэтому вы приказываете делать это, как вы говорите. Ура!
источник
я просто использовал макет .. применить стили для ли ..
или
в CSS
источник
Вы также можете использовать пустые столбцы, чтобы оставить пробелы слева
подобно
Демо :: Jsfiddle demo
источник
Начиная с Bootstrap V3.3.1, следующий стиль CSS решит эту проблему
Примечание: я попробовал все предложения в постах выше и все адреса более старых версий и не предоставляю исправления для новых версий начальной загрузки.
источник
для документации по начальной загрузке 4
источник