0

なんらかの理由で、Twitter の Bootstrapを使用して簡単な HTML を作成しようとしましたが、私の側で何かが壊れていて、何が問題なのかわかりません。ここに jsFiddle ページを作成し、スクリーンショットも添付しました。問題は次のとおりです。

  • テキスト ボックスのスタイルが Bootstrap ページに表示されているものと異なる
  • ラベルとテキスト ボックスが整列していません (左にラベル、右にテキスト ボックス)
  • フィールド間にスペースはありません
  • ドロップダウン ボックスが機能しません。
  • 検索ボックスがおかしい

どのステップが欠けているのかよくわかっていないようです。ここではかなり遅いので、別の目を使うかもしれません。明らかな何かが欠けているかどうか誰かに教えてもらえますか? ボタンがスタイリッシュになるので、何が起こっているのかよくわかりません。

ここに画像の説明を入力 ここに画像の説明を入力

4

2 に答える 2

2

少しの CSS でこれを実現できます。

入力とラベルを左にフローティングしてから、少しマージンを追加します。

label,input
{
    float:left;
    margin-bottom:5px;
}
label{
    clear:left;
    width:50px;
}

デモ: http://jsfiddle.net/Lrczj/1/

また、この部分は無効な HTML であることに注意してください。

<input id="enableTooltip" type="checkbox">Enable tooltip </input>

他のテキスト フィールドと同じように、テキストをラベルにするだけです。入力には HTML の終了タグがありません。

アップデート

HTML をよく見ると、フォーム フィールドをフォームに配置するのを忘れているようです。

入力は常に の中に入る必要があり<form>[...]</form>ます。

フォームタグが含まれているコードをもう一度示します: http://jsfiddle.net/Lrczj/2/

于 2011-08-21T09:28:33.777 に答える
1

あなたの jsFiddle は、あなたのスクリーンショットのように見えませんか?
あなたのマークアップを見て、間違いを見つけました：

<input id="enableTooltip" type="checkbox">Enable tooltip </input>

そのような入力にテキストを入れることはできません。次のように変更する必要があります。

<input id="enableTooltip" type="checkbox" />Enable tooltip

また：

<input id="enableTooltip" type="checkbox"><label>Enable tooltip</label>
于 2011-08-21T09:33:12.900 に答える