У меня есть простая демонстрация здесь:
<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}
В twitter bootstrap 3 попробуйте класс pull-right
class="btn pull-right"
"pull-right" класс может быть неправильным, потому что вместо "выравнивания текста" используется "float: right".
Проверка файла bootstrap 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>
Обновление 2018 - 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 выровнять правильные примеры
Бутстрап 3
Используйте класс pull-right.
Используйте тег button вместо input и используйте класс pull-right.
pull-right класс полностью испортил обе ваши кнопки, но вы можете исправить это, указав пользовательский запас с правой стороны.
<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; }
Добавляя к принятому ответу, при работе в контейнерах и столбцах, которые были созданы в дополнение к бутстрапу, у меня иногда есть полный растянутый столбец с дочерним 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>
Извините за ответ на более старый уже ответивший вопрос, но я подумал, что должен указать несколько причин, по которым ваш jsfiddle не работает, если другие проверяют это и задаются вопросом, почему класс pull-right, описанный в принятый ответ не работает.
<button>.рабочая скрипка: 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>
(Я также добавил минимальную ширину к кнопкам, поскольку я не мог выдержать вид оборванного правоподобного взгляда на кнопки из-за различной ширины:))
Использование помощника Bootstrap pull-right не сработало для нас, поскольку оно использует 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>
Применить класс pull-right для кнопки.
http://getbootstrap.com/css/#helper-classes-floats → Классы помощников
Эта ссылка поможет
Понижающее право было амортизировано по состоянию на v3.1.0. Просто голова.
http://getbootstrap.com/components/#callout-dropdown-pull-right
<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>
Я просто использовал макет.. стили для li..
или
<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;
}
Можете ли вы попробовать собственный CSS в сторону загрузочного CSS, чтобы увидеть, есть ли какие-либо изменения. Попробуйте
.move-rigth{
display: block;
float: right;
}
Если он работает, вы можете попытаться манипулировать тем, что у вас есть, или добавить к нему другое форматирование и добиться того, чего хотите. Поскольку вы используете bootstrap, это не значит, что если он не предлагает вам то, что вы хотите, вы просто управляете им. Вы работаете с вашими кодами, и вы приказываете ему делать то, что вы говорите. Ура!
Теперь вам нужно добавить .dropdown-menu-right в существующий элемент .dropdown-menu. pull-right больше не поддерживается. Подробнее здесь http://getbootstrap.com/components/#btn-dropdowns
вы также можете использовать пустые столбцы, чтобы дать пробелы слева
like
<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
В 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>
Из Bootstrap V3.3.1 следующий стиль CSS решит эту проблему
.modal-open{
padding-right: 0 !important;
}
Примечание. Я пробовал все предложения в сообщениях выше, и все адреса более старых версий и не предоставляют исправления для версий бутстрапов в новостях.
для начальной загрузки 4 документация
<div class="row justify-content-end">
<div class="col-4">
Start of the row
</div>
<div class="col-4">
End of the row
</div>
</div>