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

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

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, но это полностью испортит выравнивание. Что я делаю не так?

15 ответов


вставить pull-right в атрибут class и пусть bootstrap упорядочивает кнопки.

на начальной загрузки 2.3 см.: http://getbootstrap.com/2.3.2/components.html#misc > вспомогательные классы > .тянуть вправо.

на 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 Попробуйте класс тяга-правый

class="btn pull-right"

класс " pull-right "может быть неправильным, потому что в использовании" float: right " вместо выравнивания текста.

проверка файла css bootstrap 3 я нашел класс "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 что может помешать плыть-прямо с работы. В некоторых случаях классы util любят align-self-end или ml-auto работа для правого выравнивания элементов, которые находятся внутри контейнера flexbox, как Bootstrap 4 .строка, карта или навигатор.

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

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


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; }

добавляя к принятому ответу, при работе в контейнерах и столбцах, которые встроены в заполнение из bootstrap, у меня иногда есть полный растянутый столбец с дочерним 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, как описано в принятом ответе, там не работает.

  1. url-адрес начальной загрузки.файл css недопустим. (возможно, это сработало, когда вы задали вопрос).
  2. вы должны добавить атрибут: type= "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>

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


использование Bootstrap pull-right helper не работал для нас, потому что он использует float: right, который сил inline-block элементы, чтобы стать block. И когда .btnС 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>

применить pull-right класс для кнопки. http://getbootstrap.com/css/#helper-classes-floats -> вспомогательные классы

эта ссылка поможет


увод вправо был амортизируются как "В3".1.0 . Просто предупреждаю.

http://getbootstrap.com/components/#callout-dropdown-pull-right


можете ли вы попробовать пользовательский CSS в стороне от bootstrap CSS, чтобы увидеть, если какие-либо изменения. Попробуй!--2-->

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

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


<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;
}

теперь вам нужно добавить .выпадающее меню-справа от существующего .выпадающего меню элемента. pull-right больше не поддерживается. Больше информации здесь 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


для bootstrap 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>