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字体序列，但最后输入最后一个条目monospace（不带引号），因为它意味着回退到浏览器的默认等宽字体。

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

Answer 3

在bootstrap中我们有样式：

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>

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

4 个答案: