Лучший способ дать новой строки

У меня есть форма, которая выглядит следующим образом:Лучший способ дать новой строки

<form class="navbar-form text-center"> 
     <input type="text" class="span2"> 
     <p></p> 
     <input type="text" class="span2"> 
     <p></p> 
     ... 
     <button type="submit" class="btn btn-success">I'm Done</button> 
    </form>

Прямо сейчас я использую <p></p> блок, но кажется, что далеко от элегантности мне.

Я хотел бы знать, был ли лучший способ, потому что я искал немного и не мог найти его. Спасибо!

EDIT: Я бы хотел избежать дополнительного HTML, если это возможно, как br и p-теги.

источник

2013-04-30 Anonymous

.span {краю дна: 1em; } –

Как чистого раствора CSS, вы можете использовать:

input.span2 { 
    display: block; 
    margin-bottom: 10px; 
}

источник

2013-04-30 05:23:33

Очень простой ответ: используйте breaking space.

Например:

a 
<br> 
b

Окажет так:

a 
b

Если вы хотите пространство между вашими элементами, просто добавьте еще <br>, например, так:

a 
<br> 
<br> 
b

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

a 

b

источник

2013-04-30 05:15:46

Вы также можете создавать новые строки с '\ n' слишком – Killrawr

Хорошая идея, но пространство слишком мало или слишком много с одним или двумя бр. Я знаю, что я действительно придирчив ... – 2013-04-30 05:20:21

@Killrawr '\ n' отличается от'
'. '\ n' отображает новую строку только в исходном коде. '
' выводит на экран новую строку. –

См http://twitter.github.io/bootstrap/base-css.html#forms

<div class="controls controls-row"> 
    <input type="text" > 
</div>

источник

2013-04-30 05:18:39

Это было бы отлично для больших форм, но я думаю, я буду работать с дюжиной элементов при макс, чтобы он чувствовал себя излишним. Спасибо за ссылку, и я буду помнить об этом. – 2013-04-30 05:33:11

Это рекомендуемый способ разбить формы бутстрапа! :) вы, как правило, не должны использовать какой-либо HTML-код «fudge» с бутстрапом. –

Вы правы, думая, что вы не должны добавлять дополнительный HTML исключительно для презентации, которая добавляет нет семантическое значение. CSS на вашей стороне.

.span2 { 
    display: block; 
    margin-bottom: 25px; 
}

http://jsfiddle.net/AGp2g/

источник

2013-04-30 05:23:43

Лучший способ дать новой строки

ответ

Смежные вопросы