2013-01-22 8 views
20

Ich habe folgendes textarea Element:Wie mache ich den Text in einem Textarea Monospace bei Verwendung von Twitter Bootstrap?

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

Ich habe mit bootstrap gerade erst begonnen, aber nicht die beste Art und Weise trainieren Sie den Text in dem Textmonospace zu machen.

+0

Mit CSS 'textarea {font-family:" Monospace;}} wenn es nicht funktioniert, dann vergewissere dich, dass keine andere CSS-Regel es außer Kraft setzt, sonst benutze '' wichtig' im Wert, benutze es mit Pflege. –

+0

Ich möchte keinen Text in allen Textbereichen haben, nur einen. – smithy

+0

@DeepakKamat, die Anführungszeichen sind falsch, es sei denn, Sie erwarten von einem System eine Schriftart mit dem spezifischen Namen Monospace. –

Antwort

27

folgendes zu Ihrem Textarea-Tag hinzufügen sollte

style="font-family:monospace;" 

arbeiten oder sonst können Sie nur auf Ihre CSS fügen Sie es wie diese

#textarea{font-family:monospace;} 
+1

das funktionierte außer benötigt um style = "font-family: Monospace;" gemäß den obigen Kommentaren. – smithy

+0

@smithy, froh, dass ich helfen konnte. jemand hat mich abgelehnt:/Es ist vielleicht nicht die beste Lösung, da Sie Ihren Code vom Styling trennen müssen, aber es funktioniert. Vielleicht wäre es eine bessere Idee auf lange Sicht, eine Klasse wie "textaramono" zu erstellen und anzuwenden. – Jess

+0

Sie machten einen Fehler mono-Space sollte monospace sein, ich habe eine Bearbeitung zu Ihrem Beitrag gemacht und upvoted – Gijs

14

Twitter Bootstrap setzt viele Styling-Elemente, und es ist nicht immer trivial, um sie zu überschreiben. Für ein bestimmtes Element ist es jedoch einfach, wenn Sie einen ziemlich spezifischen Selektor wie einen ID-Selektor verwenden. In Ihrem Fall hat das textarea Element id="textarea", so dass Sie z.

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

Sie können eine beliebige Abfolge von Monospace-Schriften in der Reihenfolge der Präferenzliste, aber den letzten Eintrag machen monospace (ohne Anführungszeichen) zuletzt, weil es bedeutet, an den Browser des Standard-Monospace-Schrift zurückzufallen.

Es ist normalerweise nicht gut für die Benutzerfreundlichkeit, Schrift in Monospace in textarea festzulegen, es sei denn, die erwartete Eingabe ist Computercode, Zahlenreihen oder anderer Text, der für Monospace-Rendering geeignet ist.

+1

Meiner Meinung nach ist dies die umfassendste Antwort, also die beste. –

2

In Bootstrap haben wir Stile:

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

in Ihrem CSS Sie diese in sich ändern müssen:

#textarea { 
font-family: monospace; 
} 

Also mit id Ihre TextArea- wird eine höhere Priorität haben.

Verwandte Themen