Я использую Bootstrap в первый раз, и у меня много проблем, выравнивая эту форму горизонтально влево.
Элементы списка горизонтальны, как и должно быть, но я хочу, чтобы контрольные метки (class Bootstrap для меток формы) были в одной позиции, размещенной слева.
Форма содержится в div с разметкой 7, так как мой сайт состоит из двух столбцов – 7 и 4 столбцов.
Ниже мой HTML. Если вы посмотрите в разделе «Горизонтальные формы» на этой странице http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms , вы увидите, что метки выровнены по левому краю, но не полностью выровнены по левому краю, начало меток находится в одном и том же положении по вертикали.
Только мои два цента. Если вы используете 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;}