2

TwitterBootstrapを使用して予算テンプレートを作成したいと思います。出力には、行ラベル、2つのインライン入力、合計出力、さらに2つのインライン入力、および最終的な合計出力が必要です。アイデアは、各行が1つのカテゴリになり、入力のペアが数量とレートになり、乗算すると合計が得られるというものです。次のようになります。

Category_1     Input_1    Input_2   Total=Input_1*Input_2       Input_3    Input_4    Total=Input_3*Input_4

ブートストラップで説明されているクラスシステムを使用して、これらすべてを1つの行に配置するのに問題があります。同じ行で2つの入力を取得できますが、中央のnon_inputスパンとそれに続く最後の2つの入力を組み合わせる方法がわかりません。どうすればこれを行うことができますか？

アップデート：

私はこれを試すために数回の反復を経験しました。これは、最近失敗した試みにすぎません。

<div class="controls controls-row">
    <label class="control-label">Category 1</label>
    <input class="span1" type="text" placeholder="Input 1">
    <input class="span1" type="text" placeholder="Input 2">
    <label class="control-label">Total 1</label>
    <input class="span1" type="text" placeholder="Input 3">
    <input class="span1" type="text" placeholder="Input 4">
    <label class="control-label">Total 2</label>
</div>
4

2 に答える 2

2 
<form class="form-inline">
    <span>Category 1</span>
    <input type="text" class="input-small" placeholder="Input 1">
    <input type="text" class="input-small" placeholder="Input 2">
    <span>Total 1</span>
    <input type="text" class="input-small" placeholder="Input 3">
    <input type="text" class="input-small" placeholder="Input 4">
    <span>Total 2</span>
</form>​

これがフィドルです。今、あなたはただ間隔を微調整するために身廊を作ります。

また、使用しているHTML要素にも注意してください。ラベルはコントロールに関連付ける必要があります。

于 2012-08-28T09:20:15.340 に答える
1

ラベルを使いたかったので、for属性を付けました。ラベルにcontrol-labelクラスを使用しないことに注意してください。使用しないと、混乱してしまいます。ラベルと入力が一緒になり、2つの列が最初に折り返されるため、ウィンドウが狭い場合やモバイルの場合に、これがより適切に動作することがわかります。

<div class="form-inline">
     <span style="margin-right:8px">
       <label for="IsPublic">Is Public:</label>
       <input id="IsPublic" .../>
     </span>
     <span>
       <label for="IsPrivate">Is Private:</label>
       <input id="IsPrivate" .../>
     </span>
</div>
于 2013-05-30T22:54:32.813 に答える