fitting a control-group inside a span in bootstrap

1
votes

I have a modal which contains a form and I'm trying to divide it into two vertical columns. I'm using fluid-container that contains a span12 row which in turn is split into two span 6 divs.

Everything is good except when I try to make controls horizontal by making form as form-horizontal and putting a control in a control group with its label. It somehow just pushes the name label and associated control to the right and ignores the span6 div which it is in. I'm pasting the partial markup below:

            <div modal="shouldBeOpen" class="container-fluid" close="close()" options="opts">
            <div class="row-fluid">
                <div class="span12">
                    <div class="modal-header">
                        <h4>I'm a modal!</h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-form">
                            <form class="form-horizontal" novalidate>
                                <div class="row-fluid">
                                    <div class="span6">
                                        <div class="control-group">
                                            <label class="control-label">Name: </label>
                                            <div class="controls">
                                                <span class="input-medium uneditable-input">some name</span>
                                            </div>
                                        </div>
1
csslayouttwitter-bootstrap

1 Answers

2
votes

There are some styles on .form-horizontal .control-label and .form-horizontal .controls in the bootstrap CSS which you will need to override.

.form-horizontal .control-label { 
  width:auto; float:none; display:inline; text-align:left;
}
.form-horizontal .controls { display:inline-block; margin-left:0; }