Amegabosco’s Weblog

Believe it, it has already happened !!:

 

http://stackoverflow.com/questions/12252815/how-to-use-labels-inside-of-a-control-row

 

3
down vote
favorite
2
I’m trying to use a Boostrap to layout a form with horizontal row inputs (a la « control-row ») but have labels positioned above the form input. See the layout below for an example.

Is this possible with Boostrap? I’m trying to avoid resorting to a million row/span# divs, but can’t find another way of implementing this without a lot of custom CSS. My current plan is to test out using tables :/ Please save me from that fate!

LABEL1 LABEL2
| Input | | Input |

LABEL 3
| Long input |

LABEL 4 LABEL 5
| Input | | Input |
css twitter-bootstrap
share|improve this question
edited Jan 28 at 12:19

Oldskool
7,24511234
asked Sep 3 ’12 at 18:55

user1644447
1613

jsfiddle.net/D2RLR/2321 – too many divs/spans? – David Spence Oct 3 ’12 at 13:28

You might want to edit the title of your question, since it says, BOOstrap (a Halloween pun, perhaps?), @user1644447 – Jonathan M Oct 12 ’12 at 13:24
1 Answer
activeoldestvotes
up vote
3
down vote
I was able to get this accomplished without the use of tables, using a combination of control-row and control-group classes.

First Name:

M.I.:

Last Name:

Social Security Number:

Date of Birth:

​​​​​​​​​​​​​​​

In order to get it to work correctly though (since control-group divs are display: block;, I had to override that class and add a vertical-align: top; with the following):

.control-group {
display: inline-block;
vertical-align: top;
}
Here’s how it turned out: http://jsfiddle.net/bhGyz/

Publicités

No comments yet»

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :