css - 使用 Twitter Bootstrap 时，如何在 textarea 等宽中制作文本？

Question

我有以下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，但无法找到在 textarea 等宽中制作文本的最佳方法。

Answer 1

将以下内容添加到您的 textarea 标签应该可以

 style="font-family:monospace;"

否则你可以像这样将它添加到你的CSS

#textarea{font-family:monospace;}

Answer 2

Twitter Bootstrap 设置了许多样式功能，并且覆盖它们并不总是微不足道的。但是，对于特定元素，使用 id 选择器等相当特定的选择器很容易。在你的情况下，textarea元素有id="textarea"，所以你可以使用例如

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

您可以按优先顺序列出任何等宽字体序列，但将最后一个条目monospace（不带引号）放在最后，因为这意味着回退到浏览器的默认等宽字体。

将字体设置为等宽通常不利于可用性textarea，除非预期的输入可能是计算机代码、数字行或其他适合等宽渲染的文本。

Answer 3

在引导程序中，我们有样式：

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

在您的CSS中，您需要将其更改为：

#textarea { 
font-family: monospace; 
}

因此，使用 id 您的 textarea 将具有更高的优先级。

Answer 4

从 Bootstrap 4 开始，使用“text-monospace”类：

<textarea class="field span8 text-monospace" id="textarea" name="user_input" rows="20">
  {{default_data}}
</textarea>