El botón desplegable twitter inputtrap append aparece en el lado incorrecto de la entrada cuando en una tabla

Question

El html a continuación funciona bien por sí mismo pero cuando se coloca dentro de una tabla td, el botón desplegable aparece en el lado izquierdo de la entrada cuando debería estar en el lado derecho. Debería tener un aspecto similar al del ejemplo de agregar en el botón 'Extender controles de formulario' de esta página: http://twitter.github.com/bootstrap/base-css.html#forms

Ambos elementos tienen la forma correcta. es decir. las esquinas redondeadas y los bordes rectos están en los lados correctos, pero como el botón está en el lado izquierdo de la entrada, los bordes rectos no se alinean. Son las esquinas redondeadas que están una al lado de la otra. Quiero que aparezcan como en el marcado, con la entrada al lado del botón desplegable, que parece estar unida. Incluso si intenta usar la clase "input-prepend" (no quiere decir eso) no cambia.

Nota: Estoy usando twitter bootstrap en una aplicación de rieles a través de la última versión del twitter-arranque-carriles joya.

<div class="btn-group input-append">  
    <input class="span2" id="fruit_selection" name="fruit" />   
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">apple</a></li> 
     <li><a href="#">orange</a></li> 
     <li><a href="#">banana</a></li> 
    </ul> 
</div> 

• la única css que tengo es lo que vino con arranque de twitter y también la interfaz de usuario jQuery.
• es el mismo en Safari y Firefox.
• Su dentro de la forma etiquetas.
• He intentado tantas combinaciones de divs, tramos, clases (append, prepend, btw-group, add-on, control-group, etc.) que puedo pensar.

¿Lo estoy haciendo mal? ¿Hay algún css adicional que pueda agregar para que funcione? Cualquier ayuda sería apreciada.

de puntos de bonificación: El de agregación y de anteponer ejemplo (http://twitter.github.com/bootstrap/base-css.html#forms) no funciona en mi sitio, ya sea dentro o fuera de una mesa. Solo puedo usar uno o el otro no ambos al mismo tiempo.

Answer 1

Veo lo que usted está tratando de hacer ahora, que desea utilizar una entrada en lugar de un botón con el grupo desplegable. Revisando la documentación del programa de arranque no encontré ninguna solución para esa configuración, aunque puedes emular fácilmente la tuya copiando el comportamiento del botón y simplemente creando tu propia clase para admitir una entrada con un grupo desplegable, como por ejemplo:

CSS

.btn-group .input:first-child { 
    border-bottom-left-radius: 4px; 
    border-top-left-radius: 4px; 
    margin-left: 0; 
} 

.btn-group .input { 
    float: left; 
    position: relative; 
} 

con este CSS en su lugar todo lo que tiene que hacer es incluir la clase .input en su campo de introducción y debería funcionar:

HTML

<div class="btn-group">  
    <input class="span2 input" id="fruit_select" name="fruit" />    
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">apple</a></li> 
     <li><a href="#">orange</a></li> 
     <li><a href="#">banana</a></li> 
    </ul> 
</div> 

Demo, edit here.

Answer 2

Trate de ajustar sus listas dentro de un div con clase como grupo de control: a continuación se proporciona un ejemplo. Sé que mencionaste que probaste el grupo de control pero le di otra oportunidad. este código funcionó para mí después de muchas pruebas y errores ... buena suerte.

<div class="control-group"> 
    <div class="controls"> 
    <ul class="dropdown-menu"> 
     <li><a href="#">apple</a></li> 
     <li><a href="#">orange</a></li> 
     <li><a href="#">banana</a></li> 
    </ul> 
    </div> 
</div>