Twitter bootstrap float div right

Question

Что нужно сделать в 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>

Answer 1

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

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

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

.myclass { 
    text-align: right; 
} 

---

UPDATE:

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

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

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

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

Answer 3

Это делает трюк без необходимости добавления встроенного стиля

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

Ответ i n гнездование другого <div> с классом «pull-right». Объединение двух классов не будет работать.

Answer 4

самозагрузки 3 имеет класс для выравнивания текста в DIV

<div class="text-right"> 

будет выровнять текст по правому

<div class="pull-right"> 

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

Answer 5

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

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

редактировать: пример с фрагментом:

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

Answer 6

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

Bootstrap 3

v3 Text Alignment 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 Text Alignment 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>