Twitter Bootstrap input append breaks on row-fluid

Question

I'm using Twitter Bootstrap together with their responsive flavor. I'm having some problems with input-append and adding a "%" to the end of an input. I realized that removing the "-fluid" from "row-fluid" solves the issue.

1. Would it be ok to use a div.row inside of a div.container-fluid?
2. How could this be fixed: http://jsfiddle.net/zhenghao1/svrec/

Thanks in advance everyone!

Answer 1

A quick way to do this is by floating the input to the left. Add the following to your style.css and remove the span2 class from your input (use a % or fixed width instead).

.input-append input { float:left; width:10% }

Also, be sure to include bootstrap-responsive.css in addition to bootstrap.css to ensure everything sizes correctly based on your viewport.

http://jsfiddle.net/eterpstra/eXVuM/ (By default, the form switches to 'vertical' orientation when the screen size narrows to < 768px. That is why you see your label flipping to the top if the jsFiddle window is too narrow.)