142

¿Cuál es la forma correcta bootstrapde flotar un div a la derecha? Pensé que pull-rightera la forma recomendada, pero no funciona.

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

html css twitter-bootstrap Justin
fuente

¿Quieres flotar texto? Mira csstext-align

Ron van der Heijden

Sin embargo, ¿no hay una forma de construcción (estándar) en bootstrap?

Justin

stackoverflow.com/questions/12829608/…

Ron van der Heijden

85

Tienes dos span6 divs dentro de tu fila, por lo que ocupará los 12 tramos completos de los que se compone una fila.

Agregar pull-right al segundo span6 div no va a hacer nada, ya que está sentado a la derecha.

Si quiere decir que quiere tener el texto en el segundo span6 div alineado a la derecha, simplemente agregue una nueva clase a ese div y dele el texto-alinear: valor correcto, por ejemplo

.myclass {
    text-align: right;
}

ACTUALIZAR:

EricFreese señaló que en la versión 2.3 de Bootstrap (la semana pasada) agregaron clases de utilidad de alineación de texto que puede usar:

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

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

Billy Moat
fuente

55

Parece que se agregan clases de utilidad para alinear texto en 2.3 : .text-left, .text-centery.text-right

Eric Freese

1

@EricFreese - Tienes razón - no había notado esa actualización - He actualizado mi respuesta.

Billy Moat

Esta no debería ser la respuesta aceptada. Hay una clase integrada de bootstrap llamada pull-right(crédito a @Amit); En mi opinión, es más limpio usar una clase Bootstrap incorporada ... y OP lo pidió en su pregunta

Kolob Canyon

107

La pull-rightforma recomendada es hacer flotar un div a la derecha , creo que estás haciendo las cosas bien, tal vez solo necesites 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
fuente

desafortunadamente pull-rightfue desaprobado con la versión 3.1: getbootstrap.com/components/#dropdowns-alignment

2015

12

@ ılǝ "... hemos dejado de utilizar .pull-right en los menús desplegables ". Esto no se aplica a otros usos de pull-right.

usuario2864740

78

bootstrap 3 tiene una clase para alinear el texto dentro de un div

<div class="text-right">

alineará el texto a la derecha

<div class="pull-right">

arrastrará a la derecha todo el contenido, no solo el texto

ishimwe
fuente

text-right, text-leftY text-centerfunciona perfectamente. Y alinea el texto con el contenedor en consecuencia.

Anish Nair

gracias @BojanKogoj, en efecto pull-derecha está desfasada para los menús desplegables en v 3.1: getbootstrap.com/components/#dropdowns-alignment

ılǝ

27

Esto hace el truco, sin la necesidad de agregar un estilo en línea

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

La respuesta está en anidar otro <div>con la clase "pull-right". Combinar las dos clases no funcionará.

Berna
fuente

1

Esta debería ser la respuesta correcta. El objetivo de Bootstrap es evitar tener que lidiar con estilos directamente.

Kristen Waite

18

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

Este trabajo para mi.

editar: un ejemplo con su fragmento:

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

Kévin Berthommier
fuente

3

Puede asignar el nombre de la clase como centro de texto, izquierda o derecha. El texto se alineará de acuerdo con este nombre de clase. No necesita hacer un nombre de clase adicional por separado. Estas clases están compiladas en BootStrap 3 y bootstrap 4.

Bootstrap 3

v3 Documentos de alineación 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

v4 Documentos de alineación de texto

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

Twitter bootstrap float div derecha

Respuestas:

Bootstrap 3

Bootstrap 4