Как настроить twitter bootstrap на различные размеры ввода без использования! Важно?

Размеры входного бутстрапа расширяются только по ширине, а кнопки расширяются как по высоте, так и по размеру шрифта. (см. рис.) Я пытаюсь настроить входы для расширения по высоте и размеру шрифта. (Примечание: они исправляют это для следующей версии, но я слишком нетерпелив ждать)

До сих пор я могу добиться этого только с помощью !important hack для переопределения ввода css. Я хочу избежать использования !important любой ценой, потому что это ужасная практика.

В настоящее время это код для расширения высоты .input-large. Это не работает, когда я удаляю !important. Я предполагаю, что это потому, что входы получают более высокий приоритет, чем классы (которые я считаю абсолютно глупыми, но исправьте меня, если я ошибаюсь).

Можно ли достичь этого без удаления стиля ввода по умолчанию и не объявлять !important?

Ответы

Ответ 1

Вместо использования !important вы можете использовать селектор атрибутов, который переопределит значение по умолчанию, поскольку оно будет более конкретным, чем просто использовать class. Не хорошо с концепцией специфики? Обратитесь к этой статье.

Для расчета специфичности ваших селекторов вы можете использовать этот веб-сайт.

^[1] Используя class[attr=class]

.input-large[class="input-large"] {
    width: 400px;
}

ИЛИ

^[2] Используя tag[attr=class]

input[class="input-large"] {
    width: 400px;
}

И использование !important не является ужасной практикой, если вы используете его в нужном месте.

Обратите внимание, что выше селекторов ^[1] сделает все элементы width до 400px, имеющие class of input-large, а в случае выбора ^[2] он установит width в 400px для всех input элементов, имеющих class of input-large, поэтому, если вы хотите, вы можете вызовите несколько классов, т.е. .class.class в теге input, и используйте селектор ниже..

.input-large.input-large-altered {
    width: 400px;
}

Итак, это выберет любой элемент, который будет установлен для обоих этих классов, если вы хотите быть более конкретным, и хотите установить только для input type="text", чем вы всегда можете написать даже более конкретный селектор как

input[type="text"].input-large.input-large-altered {
   width: 400px;
}

Таким образом, указанный выше будет только целевой элемент input, чей атрибут type содержит value text AND, имеющий оба класса, т.е. .input-large .input-large-altered

Демо

Демо 2

Демо 3 (несколько классов)

Ответ 2

AFAIK вы просто поместите свой собственный CSS-код после загрузки

Пример:

... Some codes here ...

<link type="text/css" rel="stylesheet" href="bootstrap.css">
<style>
.input-large {
    width: 210px;
    height: 44px;
    margin-bottom: 10px;
    line-height: 30px;
    padding: 11px 19px;
    font-size: 17.5px;
}
</style>

... another code ...

Извините, я забыл удалить !important !important не требуется

Ответ 3

Если вы работаете с файлами без загрузки.

простым решением было бы добавить дополнительную запись, например:

.form-fatter {
  // Set font for forms
  label,
  input,
  button,
  select,
  textarea {
    // Increase the default with 20%
    #font > .shorthand(@baseFontSize*1.2,normal,@baseLineHeight*1.2); 
  }
}

в вашем html

<form class="form-horizontal form-fatter">
...
</form>