Formatowanie rozmiaru boxu CSS z wysokościami formularza

Question

Przesłałem to pytanie jakiś czas temu, ale skończyło się na przyznaniu mi odznaki tumbleweed, więc próbuję ponownie.

Przechodzę teraz przez tory kolejowe Michaela Hartla i spotkałem się z problemem, w którym właściwość rozmiarów skrzynek przeszkadza wysokościom formy, jak pokazano na poniższych zdjęciach.

@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 
} 

(właściwość skrzynkowej wielkości w efekcie)

(właściwość skrzynkowej wielkości nie w efekcie)

Wskazówka ile mniejsze formy są po box-zaklejania właściwość jest w rzeczywistości? Naprawdę nie można wyświetlić pełnych liter, ponieważ wysokość jest tak niska. Próbowałem zmienić właściwość height pod input, textarea, ...etc. ale wygląda na to, że mój kod jest nadpisywany przez Bootstrapa. Jeśli masz pojęcie, jak sprawić, by formularze były większe (większa wysokość), naprawdę bym to docenił.

Answer 1

box-sizing: border-box zmienia model pudełkowy, dzięki czemu wyściełanie jest wyjmowane z wysokości, a nie dodawane do niego.

Więc ten blok:

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

Będzie 2.5em wysoki, a to blok:

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

będzie 2em wysoki, z .5em rozstawu podzielono na wyściółki.

Innym problemem jest to, jak bootstrap określa wysokość wejścia:

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

Powodem określaniu wysokości nie działa, dlatego input[type="text"] jest bardziej szczegółowy niż input, a zatem bootstrap deklarację nadrzędne Ciebie .

Aby rozwiązać ten problem masz z wejść, określić wysokość i użyć bardziej konkretnego selektora:

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

Demo