2013-09-03 29 views
8

Tôi muốn có giao diện "Nhỏ gọn" - theo số font-size, padding và sử dụng không gian chung khi tôi sử dụng tính năng thu nhỏ trình duyệt (Ctrl--) . Tất nhiên không có tác dụng phụ quan trọng nhất là giảm chiều rộng của container.Cách làm cho Bootstrap trông gọn hơn "Nhỏ gọn"

Tôi đã cố gắng loay hoay với các @baseFontSize@baseLineHeight biến trong màn hình http://getbootstrap.com/2.3.2/customize.html tải Bootstrap nhưng tôi đang thiếu một cái gì đó như là kết quả:

  1. Không nhìn bên phải - trong điều kiện cân bằng, đệm là không đúng .

  2. Dấu ngắt trên màn hình máy chiếu (kinh dị!) - chọn hộp, bố cục, mọi thứ trở nên điên rồ.

Vui lòng bảo lãnh cho tôi!

+0

Nếu tôi hiểu đúng câu hỏi của bạn, khi thu nhỏ, bạn có muốn giữ văn bản hoạt động như vậy nhưng cũng giữ chiều rộng của vùng chứa giống nhau không? Rõ ràng là thu nhỏ sẽ giảm chiều rộng của vùng chứa, ngoại trừ nếu bạn đang sử dụng chiều rộng 100% hoặc kích thước thích ứng bằng javascript (xem Google drive). Tôi khuyên bạn nên cung cấp trang web hoặc một fiddle và giải thích những gì bạn muốn đạt được trên một dự án thực tế. –

+1

@maremp Tôi đã đề cập đến trình duyệt thu nhỏ vì nó tương quan chặt chẽ với kết quả mong muốn, tức là giảm kích thước nội dung cũng như không gian (đệm trong trường, ô bảng, v.v.) trong khi vẫn giữ tỷ lệ chính xác. Khi giải pháp đi, tôi đã hy vọng sẽ làm điều này trong CSS và không phải trong Javascript như tôi đang trong bản chất không tìm kiếm năng động. Đây là lý do tại sao tôi đã không được đăng một fiddle. Cảm ơn bình luận của bạn mặc dù, nó đã cho phép tôi mang lại sự rõ ràng hơn cho bảng (hy vọng). –

Trả lời

0

Tôi tự hỏi nếu đây là một vấn đề liên quan đến bảng kiểu phản hồi. Thật khó để đưa ra một câu trả lời dứt khoát mà không biết nếu bạn đang làm việc với hoặc không có bảng định kiểu đáp ứng. Nhưng nếu bạn đang có, bố trí sẽ không ở lại tỷ lệ với một màn hình lớn hơn bởi vì nó là đáp ứng. Vì vậy, nếu bạn có bảng định kiểu đó, hãy thử xóa nó.

+0

Khi tôi nói nó vỡ trên màn hình máy chiếu, tôi có nghĩa là các thành phần riêng lẻ chứ không phải bố cục tổng thể. Ví dụ, fiddling baseFontSize sẽ làm cho các đầu vào trông lạ như văn bản không còn được căn giữa theo chiều dọc. Nếu tôi sau đó fiddle với baseLineHeight, văn bản được quyền nhưng mũi tên ở phía bên phải của các hộp chọn phá vỡ. –

0

Tôi có hai đề xuất.

Trước tiên, bạn có đang sử dụng Bootstrap 2.3.2 cho mỗi liên kết ở trên không? Bạn có thể dễ dàng giải quyết vấn đề của bạn bằng cách sử dụng giàn giáo mới mà boostrap 3.0 (và lên) có. Đó là kinda một nỗi đau để nâng cấp trang web của bạn, nhưng có chuyển đổi tự động, và hệ thống mới là tốt hơn để làm việc với, và có thể giúp đỡ.

Thứ hai, một mẹo CSS khác mà bạn nên xem xét là trọng lượng phông chữ và chiều cao dòng. Cỡ chữ có thể làm cho văn bản của bạn mỏng hơn/dày hơn (các lớp là 100, 200, 300, 400, v.v ...). Bạn có thể làm cho phông chữ mỏng hơn, đường dây thấp hơn, nhưng phông chữ tổng thể lớn hơn, mà sẽ "nhỏ gọn" mọi thứ. Nếu bạn không biết nó có giá trị cố gắng.

font-weight: 200; 
    line-height: 30px; 
+0

Không. Sự kết hợp giữa trọng lượng phông chữ và chiều cao dòng không tạo ra hiệu ứng mong muốn. –