Geek Answers Handbook

Is horizontal shape the best way to set the width of the check mark?

I am new to twitter bootstrap and I work with horizontal form. My code looks something like this:

<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="whatever">Whatever</label> <div class="controls"> <select id="whatever" name="whatever"> <option value="blah">Blah</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="another">Another</label> <div class="controls"> <select id="something" name="something"> <option value="MyEntry">MyEntry</option> </select> </div> </div> <button type="submit" class="btn">Search</button> </form>

When I do this, the form looks great. The only problem is that the length of the control label is too long, so I get a lot of spaces to the left of the labels. Is there a way to shorten the shortcut so that I don't get so many spaces?

Thanks.

+6
source share
3 answers

I did this by creating a couple of additional form classes and use them depending on the size I need.

This is my css:

 .form-small .control-label { width: 100px; } .form-small .controls { margin-left: 120px; } .form-medium .control-label { width: 180px; } .form-medium .controls { margin-left: 200px; } .form-xlarge .control-label { width: 240px; } .form-xlarge .controls { margin-left: 260px; }

So, if I need a little label:

 <form class="form-horizontal form-small"> <!-- form body --> </form>

Of course, you can customize your own .control-label and .controls to suit your needs.

Hope this helps!

+10
source 
 <form class="form-inline" ng-submit="addCategory(transaction, categoryText)" style='display:inline;'> <span class="span2"> <label style='display:inline; width:140px'>{{param}}</label> </span> <input type="text" ng-model="categoryText" size="20" placeholder="add category"> </form>

I usually span an element that needs a fixed size, a span element, but this is for creating repeating shapes

0
source

Try using to create a container:

 <div class="set_inline_block_class_selector"> <label> <input type="radio" name="example_radio">Bootstrap radio button with controlled label </label> </div> <style> .set_inline_block_class_selector label{ display: inline-block; } </style>
0
source

More articles:


All Articles