2013-08-11 35 views
7

Tôi tin rằng để cung cấp margin-left chuẩn, chúng ta có thể sử dụng class "Offset" trong bootstrap. Đồng thời lớp học có thể được sử dụng để cung cấp lề phải không? ví dụ:Bootstrap: Lớp dành cho lề phải không?

<div class="row-fluid"> 
    <div class="offset2 span8"></div> 
</div> 

vì lý do nào đó tôi cần cung cấp cho lề phải tương đương với bù đắp2. Một số giải pháp sẽ giúp ích rất nhiều. Cảm ơn bạn.

+0

tôi nghi ngờ đó là hoàn toàn không cần thiết. Ví dụ của bạn cho thấy lý do. –

+2

Trên một mặt lưu ý, bạn nên sử dụng lớp span-x và sau đó bù đắp của bạn (ví dụ: class = "span8 offset2"). –

Trả lời

10

Không có lớp tương đương để bù đắp-x cho lề phải và vì lý do chính đáng, không cần thiết. Hãy suy nghĩ về nó theo cách này, nếu bạn cần một div 6 cột đó được bù đắp cả trái và phải 3 cột, bạn sẽ sử dụng:

<div class="row"> 
    <div class="span6 offset3">Your content...</div> 
</div> 

Ngoài ra, nếu bạn có một div 6 cột mà cần phải chỉ được bù đắp 2 cột NHƯNG, bù đắp nên 2 cột bên phải, mã sẽ là:

<div class="row"> 
    <div class="span6 offset4">Your content...</div> 
</div> 

Hãy nhớ bạn luôn được làm việc trong 12 cột (trừ khi thay đổi trong variables.less), do đó bạn có thể sử dụng khoảng thời gian-x AND offset-x để đạt được vị trí mong muốn. Nếu bạn đang tìm cách chỉnh sửa các pixel bổ sung, hãy thêm một lớp bổ sung (hoặc ID) vào vùng chứa nội dung của bạn bên trong phạm vi của bạn. Ví dụ:

<div class="row"> 
    <div class="span6 offset4"> 
     <div class="tweaked-margin">Your content...</div> 
    </div> 
</div> 

CSS:

.tweaked-margin { 
    margin-right: 4px; // or whatever you need 
} 
+0

Trong khi đọc bài viết này, tôi nhận được một câu hỏi khác trong đầu. Tôi sử dụng để viết {width: 960px; \t margin: 0 auto;} để giữ nội dung luôn ở vị trí trung tâm. Nếu tôi viết một cái gì đó như

My entire content
, cho dù đây sẽ là mã tương đương để giữ cho nội dung của tôi luôn ở trung tâm trong các trang có chất lỏng đáp ứng không gian bằng nhau ở cả bên trái và bên phải của nội dung? Cảm ơn bạn đã dành thời gian cho việc này. Nó rất hữu ích. –

+1

Vâng, đó là chính xác. Ngoài ra, không có độ rộng thiết lập trong px, suy nghĩ theo tỷ lệ phần trăm. Nếu bạn cần kiểm soát nhiều hơn một chút, hãy sử dụng max/min-width (hoặc chiều cao cho vấn đề đó). Điều này được chấp nhận khi hỗ trợ trình duyệt quay lại IE8. Ngoài ra, nếu tôi muốn căn giữa các phần tử, hãy nói một nút, thay vì thêm lề: 0 tự động vào chính phần tử, tôi thường chỉ bọc nó trong một vùng chứa mức khối và áp dụng căn chỉnh văn bản: center; cho nó. Hãy suy nghĩ theo cách này; đầu tiên luôn đặt vị trí của bạn với lưới, sử dụng khoảng-x và bù trừ khi cần thiết cho tất cả các vị trí chính sau đó điều chỉnh từ đó. –

+2

Điều này sẽ không hoạt động trên màn hình thiết bị di động, như sau một số chiều rộng thiết bị nhất định, mỗi khoảng thời gian chuyển đổi thành span12. –

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