Texteingabe-Rendering-Problem mit Twitter Bootstrap

Ich versuche, die Verwendung von Twitter bootstrap für eine schnelle paar Seiten. Ich habe Probleme die text-Felder zu Rendern, wie Sie im http://twitter.github.com/bootstrap/

Mein HTML sieht aus wie

<div class="clearfix">
    <label for="unit">unit</label>
    <div class="input">
       <input class="xlarge" id="unit" name="unit" type="text" value="" />
    </div>
</div>

Das scheint zu sein, alle relevanten CSS-Klassen, die ich sehe auf der demo-Seite. Aber mein text-input-Felder Rendern mit der Eingabebereich zu klein vertikal, so dass der cursor und text überlappen sich mit den unteren Rand des Eingabebereichs. Dies ist mit der neuesten chrome auf win7.

InformationsquelleAutor der Frage totowtwo | 2011-08-25

58

Dieses Verhalten wird auch ausgelöst, wenn der doctype ist falsch eingegeben. In meinem Fall <!DOCTYPE> (falsch) fixiert wurde, um <!DOCTYPE HTML> und das problem ging Weg.

InformationsquelleAutor der Antwort Hanne Olsen
9

http://twitter.github.com/bootstrap/scaffolding.html

Erfordert HTML5-doctype
Bootstrap macht die Verwendung von HTML-Elementen und CSS-Eigenschaften, die den Einsatz der HTML5-doctype. Werden Sie sicher, dass es am Anfang jeder Bootstrap-Seite in Ihrem Projekt.
```
<!DOCTYPE html>
<html lang="en">
  ...
</html>
```
InformationsquelleAutor der Antwort Jason
5

Dieses Verhalten wird gesehen, wenn das Dokument fehlt <html> tags am äußersten Ebene. Nachdem ich mein template durch ein Aufräumen Prozess, es sieht aus wie es sollte. Dank notepad++.

InformationsquelleAutor der Antwort totowtwo
2

Ich hatte das gleiche problem, aber in meinem Fall war es verursacht durch einen inkonsistenten text-Codierung von mehreren Dateien. Einige Dateien wurden kodiert in UTF-8 ohne BOM (byte order mark), während andere Dateien verschlüsselt wurden, in UTF-8 mit BOM enthalten. Ich wechselte alle Dateien nach UTF-8 ohne BOM und es funktionierte korrekt.

InformationsquelleAutor der Antwort npclaudiu
0

ersetzen class="x-large": class="input-block-level"

InformationsquelleAutor der Antwort iconte
0

In meinem Fall:

- Ich hatte die Eingabe von text in ein Formular

- Es hat funktioniert, in Firefox und nicht in Chrome

Ich der festen hierdurch der durch zwingende line-height in der bootstrap-css.
Zuerst war es so:
```
line-height: inherit;
```
und wenn ich es geändert in meiner css(so überschreibt er das bootstrap-css):
```
line-height: normal;
```
Es funktionierte!

Für Menschen, die dies sehen, und nicht wissen, was ich Rede, f12 drücken, und gehen Sie zu Ihrer textbox.

Jetzt in der Registerkarte "Stile" u sehen:
```
input, button, select, textarea {
   font-family: inherit;
   font-size: inherit;
   font-height: inherit;
}
```
das ist die eine, die Sie überschreiben möchten.

InformationsquelleAutor der Antwort MCollard
0

Danke an alle, die mir helfen.

Ich habe auch vor diesem problem, um zu helfen, die anderen user Teile ich meine Reise, wie ich es lösen. Das problem so Aussehen :

Dieses problem kommt bei Firefox der korrekte Aussehen in Chrom.

Wie ich die Lösung gefunden:
- Ich weiß, Sie werden denken, dass dies das problem mit css optimieren. Oder es ist nicht die richtige CSS dahinter.
- Ich bin mit bootstrap dann die zweite Gedanke kommt in Sinn ist, dass es keine richtigen Klassen Platz Eingabefeld.
- Wenn ich an diese Frage und begann zu Lesen der Antwort, die Sie vorgeschlagen, dass das problem mit <!DOCTYPE html> ich glaube nicht, aber ich begann zu sehen, dass Seite.
- Ich auch mit Quelltext Anzeigen im Firefox, aber es ist vorhanden, dass <!DOCTYPE html>
- Ich plötzlich Blick auf das firebug-html-und es gibt wirklich keine DOCTYPE - hier kommt, während in allen anderen Seiten kommt.
Jetzt denke ich, warum dies passiert ist, der Grund dahinter.

Dann schaue ich auf die jsp-Seiten. Das ist das problem in meinem Fall, dass jemand auch die anderen jsp-Seite vor den Körper.

Hoffe das highlight helfen.

InformationsquelleAutor der Antwort Anshu Kumar
-1

Meine Datei erstellt wurde, innerhalb von Windows und ich hatte ein ähnliches problem, d.h. die Höhe war zu klein, so Unterlängen abgeschnitten wurden. Mein Datei hat einige PHP-Zeilen als erstes, gefolgt von den erforderlichen html-Code. Nach der Lektüre all die Kommentare, ich zog meine
(2 Zeilen) an die Spitze vor die PHP-und die Höhe gestiegen ... so problem gelöst. Es scheint, dass der DOCTYPE muss am Anfang, noch bevor die PHP.

InformationsquelleAutor der Antwort user2398368

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.