2

テキストボックスが列を埋めるレイアウトを作成しようとしています。この例では、「ContactBlock_FirstName」と「ContactBlock_LastName」があります。それらが同じ行に表示され、それぞれが行の 50% を占めることを期待しています。

以下のコードからわかるように、(2 x 10 列) の高レベル コンテナーで可変行を使用しています。span10 内にコントロール グループがあり、各入力が 6 列になるように分割します (流動的なレイアウトを使用しているため、ネストされた行は常に 12 に追加する必要があります)。

幅が正しく表示されているにもかかわらず、テキスト ボックスが 2 行に表示される理由を誰か教えてください。出力のスクリーンショットを次に示します。 http://screencast.com/t/XEziHbs7X

Foundation Grid から Bootstrap に切り替えているので、レイアウトに他にも問題がある可能性がありますので、お気軽に指摘してください。ありがとう！

<div class="container">
    <div class="row-fluid">
        <div class="span2">
            <h3>
                Left Nav</h3>            
        </div>
        <div class="span10">
            <form>
            <h3>
                Body</h3>
            <div class="row-fluid">
                <div class="span6">
                    <h4>
                        Column A</h4>
                    This is just same plain text. This is just same plain text. This is just same plain
                    text. This is just same plain text. This is just same plain text. This is just same
                    plain text. This is just same plain text. This is just same plain text. This is
                    just same plain text. This is just same plain text.
                </div>
                <div class="span6">
                    <h4>
                        Column B</h4>
                    This is just same plain text. This is just same plain text. This is just same plain
                    text. This is just same plain text. This is just same plain text. This is just same
                    plain text. This is just same plain text. This is just same plain text. This is
                    just same plain text. This is just same plain text.
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">
                    Name<span class="required">*</span></label>
                <div class="controls controls-row">
                    <input class="span6 required" id="ContactBlock_FirstName" name="ContactBlock.FirstName"
                        placeholder="First Name" type="text" value="" />
                    <input class="span6 required" id="ContactBlock_LastName" name="ContactBlock.LastName"
                        placeholder="Last Name" type="text" value="" />
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    Save</button>
                <a href="#" class="btn">Cancel</a>
            </div>
            </form>
        </div>
    </div>
</div>
4

2 に答える 2

0

新しい回答それを壊しているのは左側の余白のようです。css を使用してこれを手動で変更できます (ただし、異なるサイズにはメディア クエリを使用する必要があります。例は次のようになります)。

#ContactBlock_LastName
{
   margin-left:0px;  /* or whatever value you think looks best */
}

古い答え

コントロール行は流動的ではないため、入力をスパン 5 にし、スパン 5 を 12 ではなく 10 まで埋める必要があります。流動的でない行は、12 ではなく合計スペースになります。

于 2012-09-06T18:46:28.653 に答える
0

@ ben336 が述べたように、コントロール行は流動的ではないため、これは問題のように見えます。彼の提案はうまくいくはずです。私は当分の間、これを使用することにしました...この回答への変更もお気軽に提案してください。

    <div class="row-fluid control-group">
        <label class="control-label">
            Name<span class="required">*</span></label>
        <div class="controls">
            <div class="span6">
                <input class="span12 required" id="ContactBlock_FirstName" name="ContactBlock.FirstName"
                    placeholder="First Name" type="text" value="" />
            </div>
            <div class="span6">
                <input class="span12 required" id="ContactBlock_LastName" name="ContactBlock.LastName"
                    placeholder="Last Name" type="text" value="" />
            </div>
        </div>
    </div>
于 2012-09-06T19:16:34.057 に答える