У меня есть простая демонстрация здесь:
<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}
В твиттере bootstrap 3 попробуйте класс pull-right
class="btn pull-right"
Класс «pull-right» может быть неправильным, потому что в нем используется «float: right» вместо text-align.
Проверяя файл css начальной загрузки 3, я нашел класс «текст-право» в строке 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>
& Лт; / div >
Обновление 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 , и многие элементы являются «отображением: flex», которое может помешать работе float-right. В некоторых случаях классы утилит, такие как align-self-end
или ml-auto
, работают для выравнивания элементов, которые находятся внутри контейнера flexbox, таких как Bootstrap 4 .row, Card или Nav.
Также помните, что text-right
все еще работает на встроенных элементах.
Bootstrap 4 выравнивают правильные примеры
& Лт; hr >
Bootstrap 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, который делает тягу, чтобы быть способом идти.
& Лт;!- язык: html - >
<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) вместе со смещением первого столбца.
& Лт;!- язык: html - >
<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 не работает, если другие проверят это и задаются вопросом, почему класс «тянуть направо», как описано в принятом ответе, не работает там.
< button >
.рабочая скрипка:
<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
](http://www.w3.org/ TR /CSS2/visuren.html#dis-pos-flo). И когда .btn
s становятся block
, они теряют естественную границу, которую inline-block
предоставлял им как квазитекстовые элементы.
Поэтому вместо этого мы использовали direction: rtl;
на родительском элементе, который приводит к тому, что текст внутри этого элемента отображается справа налево, и это также приводит к тому, что элементы inline-block
отображаются справа налево. Вы можете использовать МЕНЬШЕ, как следующее, чтобы не выкладывать детей 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>
В 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>
Примените класс pull-right
для кнопки.
http://getbootstrap.com/css/#helper-classes-floats -> Классы помощников
Эта ссылка поможет
Потяните вправо, амортизируется по версии 3.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>
я только что использовал макет..применить стили для ли..
или
<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. тянуть вправо больше не поддерживается. Больше информации здесь http://getbootstrap.com/components/#btn-dropdowns
Вы также можете использовать пустые столбцы, чтобы освободить место слева
подобно
<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;
}
Примечание. Я перепробовал все предложения в постах выше и на всех адресах более старых версий и не исправляю версии начальной загрузки набора новостей.
для начальной загрузки 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>