Выровнять метки и читать только текст в Twitter Bootstrap 2.0

У меня есть форма со смесью редактируемых и доступных только для чтения полей, которые я хочу использовать с помощью Bootstrap. Редактируемые поля выравниваются правильно, но поля только для чтения не являются, как показано на этом скриншоте:

readonly field

Используемый HTML-код:

<form class="form-horizontal">
<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls">
    John Smith
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="date_of_birth">Date of Birth</label>
  <div class="controls">
    <input name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
    <span class="help-inline">dd/mm/yyyy</span>
  </div>
</div>
</form>

Я не хочу показывать входные данные только для чтения для полей, которые нельзя редактировать, поскольку пользователи путаются/расстраиваются, когда они не могут щелкнуть в поле, и это поля, которые никогда нельзя редактировать поэтому на самом деле не имеет смысла показывать их как отключенные/только для чтения. Я просто хочу, чтобы текст отображался и правильно выравнивался с меткой. Есть ли способ, которым я могу это сделать, либо используя что-то в Bootstrap, либо переопределяя стили по умолчанию?

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

Ответы

Ответ 1

Создайте свой собственный стиль и примените его, как показано ниже -

.controls.readonly
{
  padding-top: 5px;
}

<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls readonly">
    John Smith
  </div>
</div>

Bootstrap не распространяется на каждую возможность, и вам нужно будет создавать свои собственные стили.

Ответ 2

Начиная с bootstrap 3.0 был добавлен класс для обработки этого

Если вам нужно разместить обычный статический текст рядом с меткой формы в горизонтальной форме используйте класс .form-control-static на <p>

<div class="controls">
  <p class="form-control-static">Lorem Ipsum and then some</p>
</div>

Ответ 3

Как и @pwaring, мне понадобилось больше стилей:

.controls.readonly{
 font-size: 14px;
 line-height: 20px;
 padding-top: 5px;
}

<div class="controls readonly">
    Lorem Ipsum and then some
  </div>

Ответ 4

Чтобы добавить к сообщению Саймона, я добавил display: inline-block; в CSS.

Это соответствует отображению метки и текста.

Ответ 5

Если вы используете Bootstrap 3, определенно используйте класс form-control-static. Если это не вариант, вы можете использовать класс control-label и иметь другой класс, который удаляет жирный шрифт.

в вашем html:

<div class="control-group">
  <label class="control-label">Name</label>
  <label class="control-label static-text">
    John Smith
  </label>
</div>

в вашем css:

.static-text {
    font-weight: normal;
}

Просто убедитесь, что вы перечислили класс static-text после control-label в атрибуте class в вашем html. Это значит, что он переопределит font-weight, установленный control-label.

В вашем случае вы также можете настроить размер шрифта.

Конечно, если bootstrap когда-либо изменяет свойства CSS в классе control-label, вам, возможно, придется вернуться и настроить класс static-text.

Ответ 6

Это использование ответа chris vdp и предоставление полного HTML-кода для людей, которые не нашли криса, который ответил ослепительно очевидным (например, я и Эдуардо в Норвегии).

Я потенциально показываю больше кода, чем нужно, но я обнаружил, что вышеупомянутые решения не были на уровне "copy-paste", который мне нужен большую часть времени.:-) Я хотел предоставить вам то, что я знаю, работает и могу, вставляя в ваш код ослепительно очевидным образом. Просто разместите эту структуру в любом месте вашего HTML.

Примечание. Это работает и требует Bootstrap 3.

<form class="form-horizontal" role="form">
    <div class="control-group">
        <label for="personName" class="control-label col-sm-2">Name</label>
        <div class="controls col-sm-10">
            <p id="personName" class="form-control-static">John Smith</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label col-sm-2" for="date_of_birth">Date of Birth</label>
        <div class="controls">
            <input class="col-sm-3" name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
            <span class="help-inline col-sm-3">dd/mm/yyyy</span>
        </div>
    </div>
</form>

Ответ 7

Вы можете расширить класс controls:

<style>
.controls.aligncorrect{
  padding-top: 5px;
}
</style>

а затем используя его следующим образом:

<div class="controls aligncorrect" style="padding-top:5px;">
    John Smith
  </div>