Как сделать текст в текстовой среде моношириной при использовании Twitter Bootstrap?

У меня есть следующий элемент textarea:

<form action="/checkit" method="get">
    <textarea class="field span8" id="textarea" name="user_input" 
        rows="20">{{default_data}}</textarea>

    <input type="submit" value="Checker">
</form>

Я только начал использовать bootstrap, но не могу найти лучший способ сделать текст в текстовом пространстве.

Ответы

Ответ 1

Добавление следующего в ваш тег textarea должно работать

 style="font-family:monospace;"

иначе вы можете просто добавить его в свой CSS, как это

#textarea{font-family:monospace;}

Ответ 2

Twitter Bootstrap устанавливает множество функций стилизации, и не всегда их можно переопределить. Однако для конкретного элемента это легко при использовании довольно специфического селектора, такого как селектор id. В вашем случае элемент textarea имеет id="textarea", поэтому вы можете использовать, например.

<style>
#textarea { font-family: Consolas, Lucida Console, monospace; }
</style>

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

Обычно для удобства использования шрифта можно установить моноширину в textarea, если, возможно, ожидаемый ввод - это компьютерный код, строки чисел или другой текст, подходящий для моноширинного рендеринга.

Ответ 3

В бутстрапе у нас есть стили:

input,
button,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

В вашем css вам нужно изменить это на:

#textarea { 
font-family: monospace; 
}

Таким образом, с идентификатором ваше текстовое поле будет иметь более высокий приоритет.