jmls jmls - 5 months ago 11
CSS Question

bootstrap form inside panel layout looks wrong

If I have a form defined inside a bootstrap panel, then the form group layout goes to pieces.

enter image description here

I coloured the form red so that I could see where it was ;) here's the jsFiddle : https://jsfiddle.net/DTcHh/

I have found that if I add

.panel-body .form-horizontal .form-group {
margin-right: 25px;
margin-left: 25px;
}


to the css, I then get this

enter image description here

(I coloured the form red so that I could see where it was ;) )

so it looks like it's fixed, but seems a terrible hack to me


  • Is this is a bug in bootstrap

  • Do I just have to apply this css

  • Is there something wrong with my form definitions ?



thanks

Answer

According to bootstrap docs (http://getbootstrap.com/css/#forms-horizontal), the class form-horizontal makes <form> act like a .row so you don't need to add it and have .col-**-* in from groups, label and stuff. The docs give you an example o

But you have a .row inside a .row and no .col-**-*. .row has negative margin to delete the padding of his parent so with no .col-**-* as parent it has 2 negative margins.

So it's kind of messy. I suggest removing your .row and .form-horizontal class to achieve the look you want or add the margin like you already did.

Here it's a fiddle.