Twitter bootstrap: làm thế nào để thêm lề bên?

Tôi có một trang có hộp chứa Twitter Bootstrap ở giữa.Twitter bootstrap: làm thế nào để thêm lề bên?

Vùng chứa này có tiêu đề trải rộng toàn bộ chiều rộng (span12) và bên dưới tiêu đề là thư viện ảnh, là một loạt các hàng có 4 ô (chứa ảnh) trong mỗi hàng.

Tôi muốn thêm lề cạnh vào mỗi hàng sao cho hình ảnh đầu tiên và cuối cùng không hoàn toàn siết chặt với đường viền của vùng chứa và ảnh được đặt cách đều nhau. Tôi không muốn sử dụng offset1 cho lợi nhuận vì nó quá lớn.

Dưới đây là một liên kết đến mockup hiện tại: http://i46.tinypic.com/21e2h4o.jpg

Nguồn

2012-06-22 alecswan

Bạn có thể gửi một bản demo trong jsfiddle.net với đánh dấu của bạn hoặc một bức tranh mockup? Tôi đang tìm kiếm nó khó cố gắng để hình dung những gì nó là ou muốn. –

Tôi bao gồm một liên kết đến mockup trong bài viết gốc của tôi. Cảm ơn – alecswan

bạn đã thử lớp học chất lỏng chưa? container-fluid row-fluid –

Bạn có thể sử dụng thứ n con sở hữu

nth-child(4n+1) css cho lề trái

nth-child(4n+4) cho lề phải

http://css-tricks.com/how-nth-child-works/

Hoặc

thêm một <div> trong .span12 của bạn với style="padding:0 19px"

và thêm bên trong một span12 <div class="row-fluid">

<div class="row"> 
    <div class="span12"> 
    <div style="padding:0 19px"> 
     <div class="row-fluid"> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     </div> 
    </div> 
    </div> 
</div>

Nguồn

2012-06-23 12:12:39 baptme

Tôi nên nói rằng tôi biết cách sử dụng bộ chọn jQuery và CSS3 để thiết lập lề. Nhưng cách tiếp cận này cản trở cách tự nhiên Twitter Bootstrap đưa ra các ô trong hàng và tôi sẽ phải điều chỉnh lề theo kích thước của phương tiện. Vì vậy, tôi đã tìm kiếm một cách để làm điều này với các cấu hình Twitter Bootstrap. – alecswan

là 940px rộng. Đó nên là chiều rộng của không gian làm việc của bạn hoặc bất cứ điều gì. 960px có vẻ là một thực tế khá phổ biến trong các hệ thống lưới điện.

Đây là giải pháp của tôi ...

<html> 
<head> 
    <title></title> 
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
     body { 
      background-color: #CCC; 
     } 

     #SiteBody 
     { 
      width: 960px; 
      margin: 0 auto; 
      background-color: white; 
     } 
    </style> 
</head> 
<body> 
    <div id="SiteBody"> 
     <div class="container"> 
      <div class="row"> 
       <div class="span12"> 
        <h1> 
         My Page</h1> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Nguồn

2012-06-23 22:24:58 Theo

Twitter bootstrap: làm thế nào để thêm lề bên?

Trả lời

Các vấn đề liên quan