When working with Rails 3.2.16 and incorporating Twitter Bootstrap into my forms using simple_form_for, I noticed that all of my text elements were showing up below and to the right of their labels, despite using the form-horizontal class. Here is a snippet of the HTML:
<div class="control-group text optional">
<label class="text optional" for="user_email">Email</label>
<div class="controls">
<input id="user_email" class="text optional" type="text" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3b3e28333b3474313633343d3f361a37233c332e373f342e74393537">[email protected]</a>" size="30" name="user[email]">
</div>
</div>
This is how it looks on the screen:
Email:
<Text box for email>
Even after trying to debug with Firebug and without any custom CSS, I struggled to get it in line with the label. The frustration with CSS is real, especially as someone from a programming background.
The label was adjusted with:
display: block;
Despite numerous settings in Bootstrap for .form-horizontal, adjusting the controls div didn't seem straightforward. After applying float:left to the label, I finally achieved the desired layout. However, it made me wonder why the form-horizontal class didn't include this by default. It left me questioning its intended purpose.