Twitter bootstrap flotador div derecha


¿Cuál es la manera correcta en bootstrap para flotar un div a la derecha? Pensé que pull-right era la forma recomendada, pero no 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>
Author: dimo414, 2013-02-11

6 answers

Tienes dos divs de span6 dentro de tu fila para que ocupen los 12 tramos completos de los que se compone una fila.

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

Si quieres decir que quieres que el texto en el segundo div span6 esté alineado a la derecha, simplemente agrega una nueva clase a ese div y dale el valor text-align: right, por ejemplo,

.myclass {
    text-align: right;
}

ACTUALIZACIÓN:

EricFreese señaló que en el 2.3 lanzamiento de Bootstrap (la semana pasada) han agregado clases de utilidad text-align que puede usar:

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

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

 77
Author: Billy Moat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-09 20:39:51

Para flotar un div a la derecha pull-right es la forma recomendada, siento que estás haciendo las cosas bien puede ser que solo necesites usar 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
Author: Amit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-18 14:45:38

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

Tirará a la derecha todo el contenido no solo el texto

 77
Author: ishimwe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-22 06:47:48

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

 26
Author: Bern,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-14 14:28:41
<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

Este trabajo para mí.

Editar: Un ejemplo con tu 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>
 18
Author: Kévin Berthommier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-20 17:25:16

Puede asignar el nombre de la clase como text-center, left or right. El texto se alineará en consecuencia con el nombre de la clase. No es necesario crear un nombre de clase adicional por separado. Estas clases están construidas 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>
 3
Author: Faisal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-27 12:00:53