Twitter bootstrap float div справа

каков правильный путь в 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>
132
css html twitter-bootstrap

6 ответов

у вас есть два span6 дивов в вашей строке, так что займет все 12 пролетов, что строка состоит из.

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

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

.myclass {
    text-align: right;
}

обновление:

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

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

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

77

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

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

<div class="text-right">

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

<div class="pull-right">

потянет вправо все содержимое не только текст

77

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

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

26
<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

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

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

@import url('https://unpkg.com/bootstrap@3.3.7/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>
18

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

Bootstrap 3

V3 выравнивание текста Docs

<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 выравнивание текста Docs

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