Twitter bootstrap float div right

Каков правильный способ в 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>

Ответ 1

У вас есть два 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

Ответ 2

Чтобы поплавать 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>

Ответ 3

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

<div class="text-right">

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

<div class="pull-right">

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

Ответ 4

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

<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". Объединение двух классов не будет работать.

Ответ 5

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

Ответ 6

Вы можете назначить имя класса, например текстовое, левое или правое. Текст будет соответствовать этому имени класса. Вам не нужно указывать дополнительное имя класса отдельно. Эти классы встроены в 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>