Padding Trong bootstrap

Question

Im sử dụng 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 cũng có một nền màu xám. Nền của trang có màu trắng. Vấn đề tôi gặp phải là văn bản ở ngay cạnh của nền màu xám. Tôi muốn một số đệm nhưng khi tôi thêm nó vào, khoảng hình ảnh đi đến dòng tiếp theo.

Bất kỳ ý tưởng nào tôi gặp sự cố?

Answer 1

Tôi chưa sử dụng Bootstrap nhưng tôi đã làm việc trên Zurb Foundation. Trên đó tôi sử dụng để thêm không gian như thế này.

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

Truy cập liên kết sau: http://getbootstrap.com/2.3.2/scaffolding.html và đọc phần: Cột bù trừ.

Tôi nghĩ rằng tôi biết những gì bạn đang làm sai. Nếu bạn đang áp dụng padding cho span6 như thế này:

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

Điều đó là sai. Những gì bạn phải làm là thêm phần đệm vào các phần tử bên trong:

<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

Đề xuất từ ​​@Dawood là tốt nếu điều đó phù hợp với bạn.

Nếu bạn cần thêm tinh chỉnh hơn thế, một lựa chọn là sử dụng đệm trên các yếu tố văn bản, đây là một ví dụ: http://jsfiddle.net/panchroma/FtBwe/

CSS

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

Answer 3

Có đệm xây dựng vào khác nhau các lớp học.

Ví dụ:

Một asp.net web form ứng dụng:

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

mã này trên sẽ đặt Văn bản của "Show Deleted" quá gần với hộp kiểm để những gì tôi nhìn thấy ở tốt đẹp để nhìn vào.

Tuy nhiên với bootstrap

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

này tạo ra không gian, nếu bạn không muốn văn bản in đậm, mà class = checkbox

Bootstrap là rất linh hoạt, vì vậy trong trường hợp này tôi không cần hack, nhưng đôi khi bạn cần.