CODEWITHSUNDEEP
htmlcssformstwitter-bootstrapcheckbox
user627119
user627119

Reputation: 163

Bootstrap inline checkboxes - How can I pull them left or right inside a form well?

I am using Twitter Bootstrap inline checkboxes inside a form-horizontal well well-small

If I add pull-left or right to the checkboxes, they are pulled correctly, but dropped out of the well element, even though they are nested inside the form. The pull works for buttons, but not for inline checkboxes.

I tried putting them inside a control group and using pull on the control group but they're still dropped outside the form well.

EDIT:

Failing example: http://bbalban.pagodabox.com/snippets/post-fails

Working example: http://bbalban.pagodabox.com/snippets/post-works

It fails when first label is removed or has pull-right. It works when first label is there, but has no pull qualifier.

Thanks.

Upvotes: 2

Views: 5857

Answers (1)

Arsen Kazydub
Arsen Kazydub

Reputation: 5660

Check, if your checkboxes are aligned by "float" attribute. If yes, then add "overflow: hidden" to the parent element. If no, please, provide a url so that we could test.

Edit

The main rule you have to add is:

.well { overflow: hidden; }

Besides, to correct position of labels and a button, add the following:

.well .btn { margin-top: 8px; }
.well label.checkbox { margin: 9px 3px 0 10px; }

Upvotes: 1

Related Questions