Щебетать загрузчик поплавок

127

Каков правильный способ в bootstrap поместить div вправо? Я думал, что pull-right был рекомендуемым способом, но он не работает.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6">
            <p>Text left</p>
        </div>
        <div class="span6 pull-right">
            <p>text right</p>
        </div>
    </div>
</div>
  • 0
    Вы хотите всплыть текст ?? Посмотрите на css text-align
  • 0
    Разве в начальной загрузке нет пути (стандартов)?
Показать ещё 1 комментарий
Теги:

6 ответов

75
Лучший ответ

У вас есть два div6 div6 внутри вашей строки, чтобы охватить все 12 интервалов, из которых состоит строка.

Добавление pull-right во второй div div div не будет делать ничего с ним, поскольку он уже сидит справа.

Если вы хотите, чтобы текст во втором div6 div был выровнен справа, тогда просто добавьте новый класс в этот div и присвойте ему значение text-align: right, например.

.myclass {
    text-align: right;
}

UPDATE:

EricFreese отметил, что в выпуске Bootstrap 2.3 (на прошлой неделе) они добавили классы утилиты выравнивания текста, которые вы можете использовать:

  • .text-left
  • .text-center
  • .text-right

http://twitter.github.com/bootstrap/base-css.html#typography

Поделиться
  • 5
    Похоже, они добавили служебные классы для выравнивания текста в 2.3 : .text-left , .text-center и .text-right
  • 1
    @EricFreese - Вы правы - не заметили это обновление - я обновил свой ответ.
Показать ещё 1 комментарий
95

Чтобы поплавать div вправо pull-right является рекомендуемым способом, я чувствую, что вы делаете все правильно, возможно, вам нужно использовать text-align:right;

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>
Поделиться
  • 0
    Правило « pull-right устарело в версии 3.1: getbootstrap.com/components/#dropdowns-alignment
  • 12
    @ ılǝ "... мы устарели. Правильно для выпадающих меню ." Это не относится к другим обычным правилам.
74

bootstrap 3 имеет класс для выравнивания текста в div

<div class="text-right">

выравнивает текст справа

<div class="pull-right">

потянет вправо весь контент не только текст

Поделиться
  • 0
    text-right , text-left и text-center работает отлично. И выравнивает текст с контейнером соответственно.
  • 0
    спасибо @BojanKogoj, действительно, права на нажатие не рекомендуется для выпадающих меню в версии 3.1: getbootstrap.com/components/#dropdowns-alignment
Показать ещё 1 комментарий
27

Это делает трюк, без необходимости добавлять встроенный стиль

<div class="row-fluid">
    <div class="span6">
        <p>text left</p>
    </div>
    <div class="span6">
        <div class="pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

Ответ заключается в вложении другого <div> с классом "pull-right". Объединение двух классов не будет работать.

Поделиться
  • 1
    Это должен быть правильный ответ. Суть Bootstrap заключается в том, чтобы не иметь дело со стилями напрямую.
16 
<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

Эта работа для меня.

edit: Пример с вашим фрагментом:

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>
Поделиться
2

Вы можете назначить имя класса, например текстовое, левое или правое. Текст будет соответствовать этому имени класса. Вам не нужно указывать дополнительное имя класса отдельно. Эти классы встроены в BootStrap 3 и bootstrap 4.

Bootstrap 3

v3 Документы выравнивания текста

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 4

v4 Документы выравнивания текста

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню