Giảm chiều cao của trường đầu vào Twitter Bootstrap?

Question

Trong biểu mẫu của tôi, tôi muốn giảm chiều cao của trường Nhập của tôi.

Tôi biết có các lớp đầu vào nhỏ, đầu vào trung bình kiểm soát chiều rộng của trường đầu vào, nhưng có điều gì tương tự để kiểm soát chiều cao không?

Tôi không thể tìm thấy bất kỳ thứ gì và nếu không làm cách nào để tôi ghi đè các giá trị mặc định?

Answer 1

Tôi không thể tìm thấy bất kỳ thứ gì và nếu không làm cách nào để tôi ghi đè các giá trị mặc định?

Chiều cao trường nhập của Bootstrap được xác định bằng cách sử dụng bộ chọn thuộc tính, ví dụ: input[type="text"], input[type="password"]

Bạn có thể ghi đè nó bằng kiểu của bạn ở cùng định dạng bộ chọn hoặc sử dụng các lớp và như vậy.

.mystyle input[type="text"] { 
    height: 14px; 
    font-size: 10px; 
    line-height: 14px; 
} 

Answer 2

Theo doc Bootstrap: Bootstrap CSS, bạn nên sử dụng .input-sm

Nếu bạn đang đi để viết CSS của riêng bạn, bạn đang không thực sự tận dụng sức mạnh của Bootstrap.

<input class="form-control input-sm" type="text" placeholder=".input-sm"> 

Nó chỉ thay đổi height tài sản như đã đề cập bởi @Neps

Nhưng, tôi đã phải ghi đè lên .input-sm trong CSS của riêng tôi để có được kích thước đúng.

Tôi chỉ thích sử dụng các lớp Bootstrap hơn bao giờ hết.

Answer 3

Có, có các lớp để kiểm soát chiều cao. Bạn có thể đọc về chúng here.

input-lg 
input-sm 

Answer 4

Tôi khuyên bạn nên học cách sử dụng trình biên dịch LESS hoặc SASS cho tệp khởi động của bạn và tải xuống tệp LESS/SASS cùng với Bootstrap. Nó không phải là rất khó khăn và thực sự là cách bạn đang "nghĩa vụ" để tùy chỉnh Bootstrap. Nó có thể là một chút nặng tay cho một hoặc hai chỉnh, nhưng đối với những thứ như màu tổng thể hoặc lưới/đầu vào kiểm soát khoảng cách và đệm nó thực sự là tốt hơn nhiều như các biến LESS là phổ quát và có thể áp dụng cho những thứ mà bạn sẽ ' t nghĩ để ghi đè. Ví dụ: , bạn nên trang trí tất cả các yếu tố đầu vào của mình bằng lớp "kiểm soát biểu mẫu". Các "hình thức kiểm soát" và lớp "đầu ra" được định nghĩa trong file: forms.less, và chiều cao của lĩnh vực này được dựa trên nhiều biến check it out:

.form-control { 
    display: block; 
    width: 100%; 
    height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) 
    padding: @padding-base-vertical @padding-base-horizontal; 
    font-size: @font-size-base; 
    line-height: @line-height-base; 
    color: @input-color; 
    background-color: @input-bg; 
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 
    border: 1px solid @input-border; 
    border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS. 
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); 

    ...more stuff I removed... 
    } 

Tất cả các biến được định nghĩa trong một, dễ làm việc với tệp và các thay đổi được thực hiện ở đó ảnh hưởng đến mọi thứ. Đây là mẫu:

//== Components 
// 
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). 

@padding-base-vertical:  6px; 
@padding-base-horizontal: 12px; 

@padding-large-vertical: 10px; 
@padding-large-horizontal: 16px; 

@padding-small-vertical: 5px; 
@padding-small-horizontal: 10px; 

@padding-xs-vertical:  1px; 
@padding-xs-horizontal:  5px; 

@line-height-large:   1.3333333; // extra decimals for Win 8.1 Chrome 
@line-height-small:   1.5; 

@border-radius-base:  4px; 
@border-radius-large:  6px; 
@border-radius-small:  3px; 

//** Global color for active items (e.g., navs or dropdowns). 
@component-active-color: #fff; 
//** Global background color for active items (e.g., navs or dropdowns). 
@component-active-bg:  @brand-primary; 

//** Width of the `border` for generating carets that indicate dropdowns. 
@caret-width-base:   4px; 
//** Carets increase slightly in size for larger components. 
@caret-width-large:   5px; 

Nếu phiên bản BS mới xuất hiện, bạn chỉ cần áp dụng biến cũ của mình cho tệp BS mới bằng trình biên dịch.

Links: http://getbootstrap.com/customize/

http://lesscss.org/

trực quan sử dụng phòng thu: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler