Как я могу выровнять эти элементы формы Bootstrap?

Я использую Bootstrap в первый раз, и у меня много проблем, выравнивая эту форму горизонтально влево.

Элементы списка горизонтальны, как и должно быть, но я хочу, чтобы метки управления (класс Bootstrap для меток формы) были в одной позиции, расположенной слева.

Форма содержится в div с разницей в 7, так как мой сайт состоит из двух столбцов - 7 и 4 столбца.

Ниже мой HTML. Если вы посмотрите в разделе "Горизонтальные формы" на этой странице http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms, вы увидите, что метки выровнены по левому краю, но не совсем - чтобы начало меток находилось в одном и том же положении по вертикали.

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputSaving">What are you saving for?</label>
        <div class="controls">
            <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="description">Add a short description</label>
        <div class="controls">
            <textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="categoryselect">Choose a Category</label>
        <div class="controls">
            <select class="span4">
                <!-- Add some CSS and JS to make a placeholder value-->
                <option value="Kittens">Kittens</option>
                <option value="Keyboard Cat">Keyboard Cat</option>
                <option value="Twitter Bird">Twitter Bird</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="goal">Your Saving Goal</label>
        <div class="controls">
            <input type="text" class="span4" id="goal">
        </div>
    </div>
    <button class="btn btn-large btn-primary" type="button">Submit</button>
</form>

Ответ 1

Если вы говорите, что ваша проблема заключается в том, как выровнять метки форм, посмотрите, помогает ли это:
http://jsfiddle.net/panchroma/8gYPQ/

Попробуйте изменить выравнивание текста влево/вправо в CSS

.form-horizontal .control-label{
/* text-align:right; */
text-align:left;
background-color:#ffa;
}

Удачи!

Ответ 2

Просто мои два цента. Если вы используете Bootstrap 3, я просто добавлю дополнительный стиль в свою собственную таблицу стилей сайта, которая управляет стилем text-left control-label.

Если вам нужно добавить text-left к метке, по умолчанию есть другой стиль, который отменяет этот .form-horizontal .control-label. Поэтому, если вы добавите:

.form-horizontal .control-label.text-left{
    text-align: left;
}

Затем встроенный стиль text-left применяется к метке правильно.

Ответ 3

Вместо изменения исходного класса bootstrap css создайте новый файл css, который переопределит стиль по умолчанию.

Убедитесь, что вы добавили новый файл css после включения файла bootstrap.css.

В новом файле css выполните

.form-horizontal .control-label{
   text-align:left !important; 
}

Ответ 4

Просто добавьте style="text-align: left" к вашей метке.

Ответ 5

"pull-left" - это то, что вам нужно, похоже, что вы используете Bootstrap 2, я не уверен, что это доступно, подумайте о загрузке 3, если, конечно, это огромная доработка!... для Bootstrap 3, но вам нужно убедиться, что у вас есть 12 столбцов в каждой строке, иначе у вас будут проблемы.

Ответ 6

У меня была такая же проблема. Я нашел проблему в bootstrap.min.css. Вам нужно изменить ярлык: label {display:inline-block;} до label {display:block;}