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

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

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

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

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

Kittens Keyboard Cat Twitter Bird

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

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

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

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

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

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

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

Удачи!

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

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

В новом файле css

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

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

Просто добавьте style="text-align: left" на ваш ярлык.

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