Как выровнять метки и поля только для чтения в форме Bootstrap 2

Какой рекомендуемый способ выравнивания меток и текстовых полей только для чтения в форме используется в bootstrap 2. В следующем примере кода создаются поля со смещением:

<form class="form-horizontal">
    <fieldset>
        <legend>Sample</legend>    
        <div class="control-group">
            <label class="control-label">Readonly Field</label>
            <div class="controls">
                Lorem Ipsum and then some
            </div>
        </div>
    </fieldset>
</form>

Обратите внимание, что я могу исправить это самостоятельно с помощью пользовательского CSS. Это не проблема. Просто кажется глупым, что это не встроено, поэтому я чувствую, что должен что-то упускать из виду.


twitter-bootstrap twitter-bootstrap-2
person batkuip    schedule 27.03.2012    source источник

Ответы (3)


arrow_upward
85
arrow_downward

Вы можете использовать нередактируемый ввод

<span class="input-xlarge uneditable-input">Lorem Ipsum and then some</span>

РЕДАКТИРОВАТЬ:

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

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

<div class="controls">
  <p class="form-control-static">Lorem Ipsum and then some</p>
</div>
person chris vdp    schedule 27.03.2012
comment
Только что понял, что мой вопрос был неправильным, на который вы ответили отлично, поэтому я отмечу его как правильный ответ. Однако есть идеи, что делать, если я просто хочу текст с правой стороны? - person batkuip; 29.03.2012
comment
Правая сторона этикетки. В некоторых случаях текстовое поле только для чтения не подходит. Как мой оригинальный пример. - person batkuip; 29.03.2012
comment
Конечно, но что, если мне не нужно поле, похожее на ввод, а просто чистый текст, выровненный по метке?? - person Juri; 07.10.2012
comment
Вернуться к простому старому CSS? К сожалению, Bootstrap не решает все. IMO Twitter сам по себе не король форм, на самом деле они используют немногие из них. - person gertas; 18.10.2012
comment
проверьте это и этот пост, надеюсь кому-нибудь поможет. - person Shaiju T; 27.01.2016

arrow_upward
2
arrow_downward

Есть хак. Вы можете использовать ‹label› с классом «флажок».

В твоем случае:

<div class="controls">
 <label class="checkbox">
     Lorem Ipsum and then some
 </label>
</div>
person XuDing    schedule 05.07.2013
comment
флажок получает правильное вертикальное выравнивание (мы ищем что-то с padding-top: 5px, да?), но не работает на моей странице, потому что он также добавляет нежелательные 20px padding-left. Думаю, я, вероятно, пойду с пользовательским классом. - person mwardm; 13.11.2014

arrow_upward
0
arrow_downward

Начиная с начальной загрузки 4.0 класс .form-control-static был заменен классом .form-control-plaintext.

person Eagle_    schedule 29.10.2019