css - color - Mostrar twitter bootstrap btn-group en línea con texto

bootstrap group

Question

Problema

Quiero poder usar btn group para el arranque de Twitter y hacer que los botones se muestren a la izquierda de algún texto. No estoy seguro de si esto ya está disponible en Twitter bootstrap o si necesito agregar algunos css.

Lo que tengo

Actualmente tengo un grupo btn definido con dos botones. Luego tengo después de los botones una cadena de texto.

<p>
    <div class="btn-group" data-toggle="buttons-checkbox">
        <div class="btn btn-small">BTN Text 1</div>
        <div class="btn btn-small">BTN Text 2</div>
    </div>
   String to display after buttons on same line
</p>

Lo que he intentado

He intentado algunas cosas aquí. Modifiqué la etiqueta <p> para que fuera una <div class="row"> con dos divs de intervalo, uno para los botones y otro para el texto, pero esto no funcionó. También probé lo siguiente:

<div>
    <div class="btn-group inline" data-toggle="buttons-checkbox">
        <div class="btn btn-small">BTN Text 1</div>
        <div class="btn btn-small">BTN Text 2</div>
    </div>
   <span class="inline">String to display after buttons on same line</span>
</div>

y definido en css .inline {display:inline-block; zoom:1; *display: inline;} .inline {display:inline-block; zoom:1; *display: inline;} .inline {display:inline-block; zoom:1; *display: inline;} Sin embargo, esto tampoco funcionó. Esto es lo que estoy recibiendo. Como puede ver, el texto se muestra debajo del grupo de botones. Quiero el texto a la derecha del grupo de botones.

Pregunta

¿Qué puedo hacer para que el grupo de botones se muestre a la derecha de la cadena? ¿Hay algo ya integrado en el arranque de Twitter para esto, si es así, ¿qué? Si no, ¿estaba en el camino correcto para crear una clase en línea? Si este es el caso, ¿por qué no funcionó?

Actualizar

Gracias a RichardTowers por la sugerencia sobre la clase pull-left en el grupo de botones. Sin embargo, al agregar más conjuntos (que son necesarios) obtengo lo siguiente:

Supongo que esto se debe a la flotación. ¿Es correcto y cómo lo arreglaría?

Answer 1

Esto funciona:

<p>Hello <span class="btn-group">...</span></p>

Answer 2

Hice lo que se sugiere en esta respuesta SO , así que básicamente comencé con el estilo .navbar .brand y .navbar .brand un poco.
Si está interesado, aquí está mi estilo cambiado:

/* See .navbar .brand style in bootstrap.css for a reference */ 
.btn-toolbar .title {
  display: block;
  float: left;
  margin-top: -4px; /* Recover part of margin set in child Header nodes */
  margin-left: 10px;
  font-size: 20px;
  font-weight: 200;
  color: #777777;
  text-shadow: 0 1px 0 #ffffff;
}

Uso de HTML:

<div class="btn-toolbar">
    <div class="btn-group pull-left">
        <a class="btn" href="#/search">Search...</a>
    </div>
    <div class="title">
        <h4>View offers</h4>
    </div>
    <div class="btn-group pull-right">
        <a class="btn" href="#/batchDelete">Delete ...</a>
        <a class="btn" href="#/new">New</a>
    </div>
</div>

y el resultado final:

Answer 3

Ponga pull-left en los botones div: http://jsfiddle.net/dbTqC/653/

Creo que esto solo establece float: left , así que tendrás que aclarar las cosas debajo de él. Hay una clase de clearfix para esto.

Vale la pena echar un vistazo a algunos recursos de CSS para que entiendas lo que está sucediendo aquí.

Answer 4

<p class="btn-toolbar">
  <span class="btn-group">
    <a href="#" class="btn">Button 1</a>
  </span>
  <span class="btn-group">
    <a class="btn" href="#">Button 2</a>
    <a class="btn" href="#">Button 3</a>
  </span>
  <span class="btn-group">Text here.</span>
</p>