Перетяжка В начальной загрузки

Question

Im используя самозагрузки:

<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 также имеет серый фон. Фон страницы белый. Проблема, с которой я сталкиваюсь, заключается в том, что текст имеет право на край серого фона. Я хочу некоторое дополнение, но когда я его добавлю, интервал изображения переместится к следующей строке.

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

Answer 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> 

Answer 2

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

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

CSS

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

Answer 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 является очень гибким, поэтому в данном случае я не нужно взломать, но иногда вам нужно.