Tôi đang sử dụng Twitter Bootstrap. Và tôi đã sử dụng span8 và span 4 liên tiếp. Có anyway để loại bỏ các margin-trái hàng đầu: 20px từ khoảng đầu tiên của hàng mà không cần phải qua đi xe nó bằng tay?Twitter Bootstrap Xóa Lề của Span
Trả lời
Đó 20px lề bạn nhìn thấy trên khu vực #mainContent
của bạn là do các thiết lập của lưới điện bootstrap, trong đó sử dụng một container của 940px
, nó là vụ phải được gỡ bỏ bởi các .row
container với một tài sản margin-left:-20px
. Trong thiết lập của bạn, khu vực nội dung của bạn cũng đang hoạt động giống như cách thiết kế, nhưng các phần pageHeader
và mainNav
trên cùng của bạn không được chèn vào lưới một cách thích hợp, bạn chỉ có các div bên trong các phần trên cùng của .row
không được chứa trong vùng chứa thích hợp của lưới.
Để khắc phục điều này, bạn chỉ có thể chèn tất cả các thành phần pageHeader
và mainNav
bên trong một vùng chứa .span12
và mọi thứ sẽ được sắp xếp tương ứng.
Fixed đánh dấu
<header class="row" id="pageHeader">
<div class="span12">
<div id="logo">Logo</div>
<div id="userDetails">userDetails</div>
</div>
</header>
<nav id="mainNav" class="row">
<div class="span12">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="idea_exchange.html">Idea Exchange</a></li>
</ul>
</div>
</nav>
Ngoài ra, mẹo nhanh chóng, bạn có thể chuyển màu mainNav
nền của bạn để container lưới đúng .span12
đơn giản bằng cách nhắm mục tiêu nó như vậy:
nav#mainNav .span12 {
background: url("../images/nav_bar_bg.png") repeat-x scroll 0 0 transparent;
height: 45px;
overflow: hidden;
}
bạn có thể thêm một lớp trong css của bạn với một quan trọng:
dụ:
.no_margin{
margin:0px !important;
}
và thêm lớp để html của bạn khi cần thiết.
(xin lỗi vì xấu xD tiếng anh của tôi)
Bằng cách sử dụng "hàng" hoặc lớp "hàng-chất lỏng" như mẹ của span class của bạn
<div class="row">
<div class="span3">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="idea_exchange.html">Idea Exchange</a></li>
</ul>
</div>
</div>
- 1. Twitter bootstrap: làm thế nào để thêm lề bên?
- 2. Twitter Bootstrap - tại sao hàng lớp có lề trái: -20px?
- 3. Xóa dòng hàng trong twitter bootstrap
- 4. Twitter Bootstrap - Nhãn trên đầu các trường biểu mẫu không được canh lề
- 5. Twitter Bootstrap - 100% Chiều cao
- 6. Twitter Sử dụng lớp tiện ích đáp ứng Bootstrap Twitter
- 7. làm thế nào để phá vỡ từ dài trong Span? (Sử dụng Twitter Bootstrap)
- 8. Spinner for Twitter Bootstrap .btn
- 9. Nhiều nhịp trong một hàng với Twitter Bootstrap
- 10. Clearfix with twitter bootstrap
- 11. Twitter Bootstrap 2, sụp đổ-nav
- 12. twitter bootstrap container div chiều cao
- 13. Bootstrap từ lỗi IE7 của Twitter
- 14. twitter bootstrap của băng chuyền chuyển
- 15. Responsive bảng xử lý trong Twitter Bootstrap
- 16. Twitter Bootstrap - Responsive đóng
- 17. Splitter cho Twitter Bootstrap
- 18. Twitter bootstrap modals & Ajax?
- 19. Symfony2 và Twitter Bootstrap
- 20. Twitter Bootstrap & Google Maps
- 21. Twitter Bootstrap Containers
- 22. Twitter Bootstrap "chứa chất lỏng"
- 23. Twitter Bootstrap Form Validation
- 24. Twitter bootstrap typeahead delay
- 25. CSS nào kiểm soát lề phải và lề trái giữa các phần tử biểu mẫu này trong Twitter Bootstrap?
- 26. Nhịp điệu theo chiều dọc cho Bootstrap của Twitter
- 27. Twitter bootstrap CSS + jQuery
- 28. Twitter Bootstrap Modal - IsShown
- 29. Twitter Bootstrap FileUpload
- 30. Plone and Twitter Bootstrap
Các liên kết bây giờ đã chết. –