Làm thế nào để thay đổi mặc định Bootstrap Lỏng Lưới 12 Column Width Gutter

Question

Tôi đang tìm kiếm để biết nếu có bất kỳ giải pháp đơn giản biết để thay đổi máng xối với trên chất lỏng mặc định 12 hệ thống lưới bootstrap (2.3.0).

Tôi không quen với LESS nhưng nếu đó là câu trả lời, vui lòng mô tả cách thay đổi. Cùng với Sass.

Xin lưu ý rằng nó là hoàn toàn có thể chấp nhận để thay đổi chiều rộng máng xối, một nửa hoặc ¼, ví dụ nếu có thể làm cho mọi việc đơn giản hơn.

Các mục tiêu sau đây phải được đáp ứng:

1. Phải có khả năng cập nhật bootstrap trong tương lai. Điều này có nghĩa là không chỉnh sửa các tệp khởi động thực sự.
2. Chức năng phải được giữ nguyên cho tất cả các đối tượng khác.
3. Phải đơn giản. Ít hơn 10 dòng CSS. Ví dụ, một lớp học bổ sung hoặc một cái gì đó.

Tôi đã tìm kiếm trong suốt Stack Overflow và vẫn không có ý tưởng làm thế nào tôi có thể đi về làm một cái gì đó như thế này. Theo hiểu biết tốt nhất của tôi, tải xuống Bootstrap tùy chỉnh chỉ hiển thị chiều rộng máng xối tùy chỉnh cho lưới không chứa chất lỏng. Tôi đã mã hóa hệ thống lưới chất lỏng của riêng mình trước đây, vì vậy tôi hiểu toán học, nhưng tôi lo lắng có thể có hậu quả và sẽ rất hữu ích nếu bất kỳ vấn đề nào được biết về ghi đè lớp có thể được chia sẻ.

Tôi hứa sẽ cấp tín dụng khi đến hạn.

CẬP NHẬT:

Thay đổi các biến ít hơn như được mô tả trong câu trả lời của Yoda là cách thực hiện. Có ai có bất kỳ kinh nghiệm nào thay đổi các biến số ít hơn không? Ví dụ: tôi tin rằng các biến phải được thay đổi như sau:

// Fluid grid 
// ------------------------- 
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); 
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); 

// 1200px min 
@fluidGridColumnWidth1200:  percentage(@gridColumnWidth1200/@gridRowWidth1200); 
@fluidGridGutterWidth1200:  percentage(@gridGutterWidth1200/@gridRowWidth1200); 

// 768px-979px 
@fluidGridColumnWidth768:  percentage(@gridColumnWidth768/@gridRowWidth768); 
@fluidGridGutterWidth768:  percentage(@gridGutterWidth768/@gridRowWidth768); 

Làm thế nào để thay đổi thứ gì đó như thế này? Có lẽ:

@fluidGridGutterWidth768:  percentage(1.5); 

Nếu ai đó đã làm điều này trước đây, tôi sẽ đánh giá cao việc đi đúng hướng.

Answer 1

Cách dễ nhất có thể là sử dụng tải xuống có thể tùy chỉnh mà Twitter Bootstrap cung cấp. Thay đổi biến @fluidGridGutterWidth cho phù hợp với nhu cầu của bạn trong biểu mẫu. Download the less files from here. Bạn có thể truy cập các tập tin variable.less từ dự án github bootstrap và sau đó thay đổi đoạn mã này:

// Fluid grid 
// ------------------------- 
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); 
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); // <= this one 

Tôi nghĩ bạn có quyền truy cập vào các file ít lúc đầu, sau đó tôi nhận ra bạn đang sử dụng gui tùy chỉnh trên trang mạng. Chỉ cần tải xuống ít tệp hơn và thực hiện thay đổi của bạn. Sau đó biên dịch các tệp ít hơn để cung cấp cho bạn một tệp css hoặc sử dụng ít hơn để phát triển. Bạn có thể sử dụng css hoặc min.css để triển khai.

Answer 2

Tôi cũng đang tìm một giải pháp đơn giản cho vấn đề này. Mục tiêu của tôi là sử dụng CSS đơn giản, không phải LESS. Câu trả lời này giống như bất kỳ khác tôi tìm thấy, dựa trên biên dịch LESS hoặc sử dụng trình biên dịch trực tuyến của bootstrap. Vì vậy, tôi đã cố gắng để tìm giải pháp của riêng tôi.

Đọc tài liệu bạn sẽ tìm thấy thông tin sau về chiều rộng máng xối: Cột tạo máng xối (khoảng cách giữa nội dung cột) qua đệm. Lớp đệm đó được bù đắp bằng các hàng cho cột đầu tiên và cột cuối cùng thông qua lề âm trên .rows.

Dựa trên điều này tôi đã cố gắng như sau:

.container {padding-left:1px;padding-right:1px;} 
.row {margin-left:-1px;margin-right:-1px;} 
.row > div {padding-left:1px;padding-right:1px;} 

Từ nay chiều rộng máng xối là chỉ có 2 pixel. Vấn đề tiếp theo của tôi là, chiều rộng dự định của tôi là một số lẻ. Giải pháp của tôi là để loại bỏ các miếng đệm và lề bên trái và đặt chúng ở bên phải:

.container {padding-left:0;padding-right:5px;} 
.row {margin-left:0;margin-right:-5px;} 
.row > div {padding-left:0;padding-right:5px;} 

Bây giờ tôi có chiều rộng rãnh 5 pixel.

Tôi đã không kiểm tra điều này trong tất cả các tình huống có thể bạn có thể sử dụng bootstrap. Đặc biệt, bạn phải chú ý chỉ sử dụng cột-div bên trong một hàng-div bên trong một thùng chứa-div. Nhưng trong trường hợp của tôi nó là một giải pháp rất hiệu quả mà không cần chạm vào mã nguồn gốc của bootstrap hoặc sử dụng trình biên dịch LESS.

Answer 3

Tôi nghĩ bạn có thể đang nghĩ về nó. Vấn đề với việc thay đổi các biến LESS là nó sẽ thay đổi nó cho tất cả các máng xối. Vì vậy, nếu tôi thích máng xối 15px để sắp xếp trên tất cả bố cục nhưng muốn máng xối là 5px cho một biểu mẫu bên trong lưới đó, nó sẽ không hoạt động.

Chỉ cần tạo 2 lớp học css để ghi đè lên các khu vực bạn muốn thay đổi máng xối.

Áp dụng điều này ở cấp "hàng".

.row-5-gutter{ 
    margin-left: -5px; 
    margin-right: -5px; 
} 

Áp dụng điều này ở cấp "cột".

.col-5-gutter{ 
    padding-left: 5px; 
    padding-right: 5px; 
} 

demo: http://jsfiddle.net/tg7Ey/