Заполнение в бутстрапе

Я использую bootstrap:

<div id="main" class="container" role="main">
<div class="row">
    <div class="span6">
        <h2>Welcome</h2>
        <p>Hello and welcome to my website.</p>
    </div>
    <div class="span6">
        Image Here (TODO)
    </div>
</div>

Main также имеет серый фон. Фон страницы белый. Проблема, с которой я сталкиваюсь, заключается в том, что текст имеет право на край серого фона. Я хочу некоторое дополнение, но когда я его добавлю, интервал изображения переходит к следующей строке.

Любые идеи, в которых я ошибаюсь?

Ответ 1

Я не использовал Bootstrap, но работал над Zurb Foundation. На этом я обычно добавлял такое пространство.

<div id="main" class="container" role="main">
    <div class="row">

        <div class="span5 offset1">
            <h2>Welcome</h2>
            <p>Hello and welcome to my website.</p>
        </div>
        <div class="span6">
            Image Here (TODO)
        </div>
    </div>

Перейдите по этой ссылке: http://getbootstrap.com/2.3.2/scaffolding.html и прочитайте раздел: Отсоединение столбцов.

Думаю, я знаю, что вы делаете неправильно. Если вы применяете дополнение к span6 следующим образом:

<div class="span6" style="padding-left:5px;">
    <h2>Welcome</h2>
    <p>Hello and welcome to my website.</p>
</div>

Это неправильно. Что вам нужно сделать, это добавить прописку к элементам внутри:

<div class="span6">
    <h2 style="padding-left:5px;">Welcome</h2>
    <p  style="padding-left:5px;">Hello and welcome to my website.</p>
</div>

Ответ 2

Предложение от @Dawood хорошее, если это работает для вас.

Если вам нужна более тонкая настройка, одна из них - использовать отступы для текстовых элементов, вот пример: http://jsfiddle.net/panchroma/FtBwe/

CSS

p, h2 {
    padding-left:10px;
}

Ответ 3

Есть дополнения, встроенные в различные классы.

Например:

Приложение asp.net для веб-форм:

<asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />

этот вышеприведенный код помещает текст "Показать удаленный" слишком близко к флажку к тому, что я вижу, на котором приятно смотреть.

Однако с загрузкой

<div class="checkbox-inline">
    <asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />
</div>

Это создало пространство, если вы не хотите, чтобы текст полужирный, этот класс = флажок

Bootstrap очень гибкий, поэтому в этом случае мне не нужен хак, но иногда вам нужно.