2

The output of this code (I tried to post this on jsFiddle but it doesn't seem to be working right now) looks reasonable, but, there is a lot of space 'wasted' to the left of the labels. It's important that the fields themselves be as wide as they are here.

enter image description here

This is a problem in the actual situation where there are many more fields and limited space. I want to be able to control the label width independent of the total control group width, I want it to remain right-aligned to the field, and (most importantly) I want a shorter label to result in the field moving left as well (which doesn't happen if you just mangle the control-label width).

I am not keen on delving into LESS, is that my only option? Any advice appreciated.

    <div class="container-narrow" style="width:700px">
        <div class="content">
            <div class="row-fluid">
                <div class="span5">
                    <form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
                        <div class="control-group">
                            <label class="control-label required" for="Step1_email">Email:</label>
                            <div class="controls">
                                <input class="span12" size="50" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="span7">
                    <form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
                        <div class="control-group">
                            <label class="control-label required" for="Step1_email">Thing1</label>
                            <div class="controls">
                                <input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</body>

4

2 回答 2

2

One option is a to use .form-inline on the form to allow form elements on the same line.

Something like this:

<form class="form-inline">
    <label>Email:
        <input type="text" class="span1" name="email" />
    </label>
    <label>Thing1
        <input type="text" class="span3" name="thing1" />
    </label>
</form>

If you want more spacing before the second label, you'll need custom CSS.

于 2013-02-22T19:37:16.433 回答
-1

<label class="control-label required" style="width:100px; padding-left:60px;" for="Step1_email">Email:</label>

keep (width + padding-left) == 160

于 2013-06-21T21:46:40.423 回答