Twitterのブートストラップフォームのフィールドが小さすぎる

Question

私はこのトピックを知っていますが、そこにある他の人とよく似ていますが、私は既存のスレッドをすべて見てきました（とにかく "ほとんど"）。上の助け...

問題は、どのような他の人に説明しているにはあまりにも非類似ではありません。

• 要素はこれらの中で
• 最も注目すべきはその完全な垂直方向の高さを表示しません何らかの形で入力ですボタンの隣に座っているときに貧血のように見える"add-on" class
• もっと最近私はさらに深刻な問題に気付きました。ラジオボタンは非常に小さく、ラジオボタンはほとんど見えません。

今、多くの人々は彼らのHTMLドキュメントの先頭に正しくDOCTYPEを指定し確認することによって、その問題を解決しました。私はこの単純な調整が私の静的なHTMLモックアップでのトリックをしたことも発見しました。残念ながら私はWordpressに切り替えたときに問題が再び現れましたが、HTML 5 DOCTYPEの署名を出力の最上部に置いています（これは「ソースを見る」と数回チェックしました。マインド）。

これは、この問題を解決するための簡単なスナップショットを含めました。あなたはここにそれを見つけることができます：http://www.flickr.com/photos/14261777@N00/6957941282/。ラジオボタンであるはずの小さな小さな点に注意してください。 INPUTフィールドの高さが十分ではないことが明白です。ああ、また完全性のために、私のHTMLソースの開始方法のスクリーンショットを以下に示します：http://www.flickr.com/photos/14261777@N00/6957952802/

私はこれが起こっている可能性があり、解決策の原因が不明であっても存在する可能性のある回避策に関する理論を持っている人からお聞きしたいと思います。私は線の高さ、高さ、最小高さなどのCSS属性を課してみました。

Answer 1

2つの問題があるようです。 input type=text問題とradioボタンの問題。コードが表示されないと、テキストボックスの問題がDOCTYPEに関連しているように見え、ラジオボタンの問題はCSSスタイルのオーバーライドに関連しています（ラジオボタンのインスペクター出力を投稿したかどうかを確認できます）。

変数が正しい値（たとえば18pxの高さ）として表示されている場合は、それは最も確かにDOCTYPEです。別にリスト上のthis articleから

：あなたはすべての権利のものをやったが、あなたのサイトは最新のブラウザで それが必要として見たり作業しません

。

あなたは有効なXHTMLとCSSを書いています。動的ページ要素を操作するには、W3C標準 DOM（Document Object Model）を使用しています。しかし、これらの非常に標準をサポートするように設計されたブラウザでは 、あなたのサイトは になりません。障害のあるDOCTYPEは責任を負う可能性があります。

この小さな記事では、動作するDOCTYPEを提供し、実用的なこれらの一見抽象的なタグの現実的な効果について説明します。

ここW3CあたりなどのDOCTYPEの推奨リストです：

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Answer 2

誰もが興味を持っていた場合は、ここで私は問題を解決するために追加情報：

input, input[type="text"], input[type="radio"], isindex, .uneditable-input { 
    padding: 4px; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #CCC; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #CCC; 
    border-right-width: 1px; 
    border-right-style: solid; 
    border-right-color: #CCC; 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-top-color: #CCC; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
} 

.input-append .add-on, .input-append .btn { 
    margin-left: -6px; 
} 

input[type=checkbox] { 
     -webkit-appearance: checkbox; 
}