Bootstrap horizontal form “control-label” not using responsive styling

Question

I'm using the "form-horizontal" class with Bootstrap 2, but my labels don't seem to be utilizing the Responsive styling. This is what it looks like:

When I examine it, it specifically has "width:160px" on the label, which is the regular Bootstrap setting, but the Responsive styling just has "width:auto".

My HTML for that section looks like this:

<form id="addproject" class="form-horizontal">
    <div class="control-group">
        <label for="title" class="control-label">Title</label>
        <div class="controls">
            <input type="text" name="title" id="title" />
        </div>
    </div>
</form>

Answer 1

bootstrap.css must be loaded before the bootstrap-responsive.css file.

Answer 2

.control-label is only specified in responsive.css for (max-width: 480px). Have you tried shrinking the width way down? When I use the forms, they look like your example until 480px, at which point the labels move above the input fields.

Answer 3

If you want to change as you add the class

<input type="text" name="title" id="title" class="span3" />

Another solution is to directly specify a style ID width: auto

#title {
    width_auto;
}

Remember that your new style should be after the bootstrap css