142

Qual é a maneira correta bootstrapde flutuar uma div para a direita? Eu pensei que pull-rightera o caminho recomendado, mas não está funcionando.

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

Expandir snippet

html css twitter-bootstrap Justin
fonte

Deseja flutuar texto ?? Veja csstext-align

Ron van der Heijden,

Porém, não existe uma maneira de compilar (padrões) no bootstrap?

11133 Justin

stackoverflow.com/questions/12829608/…

Ron van der Heijden,

85

Você tem duas divs de span6 em sua linha, de modo que ocupem os 12 intervalos completos dos quais uma linha é composta.

Adicionar pull-right à segunda div span6 não fará nada, pois já está à direita.

Se você quer dizer que deseja que o texto na segunda extensão span6 div esteja alinhado à direita, basta adicionar uma nova classe a essa div e atribuir o valor text-align: right, por exemplo,

.myclass {
    text-align: right;
}

ATUALIZAR:

EricFreese apontou que na versão 2.3 do Bootstrap (na semana passada) eles adicionaram classes de utilitário de alinhamento de texto que você pode usar:

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

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

Billy Moat
fonte

5

Parece que eles adicionados classes de utilitários para alinhar texto em 2.3 : .text-left, .text-centere.text-right

Eric Freese

1

@ EricFreese - Você está certo - não tinha notado essa atualização - atualizei minha resposta.

Billy Moat

Esta não deve ser a resposta aceita. Existe uma classe de bootstrap incorporada chamada pull-right(credit to @Amit); IMO, é mais limpo para usar um built-in class Bootstrap ... e OP pediu que na sua pergunta

Kolob Canyon

107

Para flutuar uma div para a direita pull-righté a maneira recomendada, eu sinto que você está fazendo as coisas corretamente, pode ser que você só precise usartext-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>

Amit
fonte

Unfrotunately pull-rightfoi depreciado com a versão 3.1: getbootstrap.com/components/#dropdowns-alignment

ılǝ

12

@ ılǝ "..precisamos .pull-right nos menus suspensos ." Isso não se aplica a outros usos pull-right.

user2864740

78

O bootstrap 3 tem uma classe para alinhar o texto dentro de uma div

<div class="text-right">

alinhará o texto à direita

<div class="pull-right">

puxará para a direita todo o conteúdo, não apenas o texto

ishimwe
fonte

text-right, text-leftE text-centerfunciona perfeitamente. E alinha o texto com o contêiner de acordo.

Anish Nair

graças @BojanKogoj, de fato puxar-direito foi depreciado por menus suspensos em v 3.1: getbootstrap.com/components/#dropdowns-alignment

ılǝ

27

Isso funciona, sem a necessidade de adicionar um estilo embutido

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

A resposta está em aninhar outro <div>com a classe "pull-right". Combinar as duas classes não funcionará.

Berna
fonte

1

Essa deve ser a resposta correta. O objetivo do Bootstrap é evitar ter que lidar com estilos diretamente.

Kristen Waite

18

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

Este trabalho para mim.

edit: um exemplo com seu snippet:

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

Expandir snippet

Kévin Berthommier
fonte

3

Você pode atribuir o nome da turma como centro de texto, esquerda ou direita. O texto será alinhado de acordo com o nome da classe. Você não precisa criar um nome de classe extra separadamente. Essas classes são construídas no BootStrap 3 e no bootstrap 4.

Bootstrap 3

v3 Documentos de alinhamento de texto

<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

Documentos de alinhamento de texto 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>

Faisal
fonte

Direito de inicialização do flutuador do Twitter div div

Respostas:

Bootstrap 3

Bootstrap 4