CSS box-sizing與形體高度混合

Question

我上傳了這個問題前一段時間，但它結束了給我的風滾草徽章，所以我再次嘗試。

我現在正在經歷Michael Hartl的railstutorial，我遇到了一個問題，那就是箱子尺寸屬性干擾了窗體高度，如下圖所示。

@mixin box_sizing { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

input, textarea, select, .uneditable-input { 
    border: 1px solid #bbb; 
    width: 100%; 
    height: auto; 
    margin-bottom: 15px; 
    @include box_sizing; <--- this line here is causing issues 
} 

（實際上箱上漿性能）

（箱集束性不實際上）

注意較小形式多少是當箱集束性是有效嗎？由於高度太低，你無法真正地查看完整的字母。我試圖改變輸入，textarea，..等等下的高度屬性。但似乎我的代碼被Bootstrap覆蓋。如果你有任何想法如何使形式更大（更高的高度），我會非常感激。

Answer 1

box-sizing: border-box更改箱子模型，使填充從高度中取出，而不是添加到它。

所以這個塊：

div { 
    box-sizing: content-box; // default 
    height: 2em; 
    padding: .25em; 
} 

將是2.5em高，而此塊：

div { 
    box-sizing: border-box; 
    height: 2em; 
    padding: .25em; 
} 

將2em身材高大，間距填充分區的.5em。

另一個問題是引導如何定義輸入的高度：

input[type="text"], ...other selectors.., 
.uneditable-input { 
    display: inline-block; 
    height: 20px; 
    ... 
} 

之所以定義高度不工作，是因爲input[type="text"]比input更具體，因此引導宣言重寫你的。

爲了解決您正在使用的輸入有問題，定義了一個高度，並使用一個更具體的選擇：

input[type="text"], textarea, select, .uneditable-input { 
    border: 1px solid #bbb; 
    width: 100%; 
    height: 2em; 
    margin-bottom: 15px; 
    @include box_sizing; 
} 

Demo