3

これが jsfiddle の私の Bootstrap フォームです。この基本構造は次のとおりです。

-------------------------------------------------
|                    Span 12                    |
|   ----------------------------   ----------   |
|   |  ----------  ----------  |   |        |   |
|   |  |        |  |        |  |   |        |   |
|   |  | Span 4 |  | Span 4 |  |   | Span 4 |   |
|   |  |        |  |        |  |   |        |   |
|   |  ----------  ----------  |   |        |   |
|   |           Span 8         |   |        |   |
|   ----------------------------   ----------   |
|                                               |
-------------------------------------------------

例えば

<div class="span12">
    <div class="row">
        <div class="span8">
            <div class="row">
                <div class="span4"></div>
                <div class="span4"></div>
            </div>
            <div class="row"></div>
        </div>
        <div class="span4"></div>
    </div>
</div>​

私の問題は、フォームが互いにつまずくように見えることです。例えば、「異常に長いラベル」というラベルがあって、それ以降のラベルがきれいに次の行に行かず、その右側にとどまっています。ファシリティの位置がずれているため、日付とファシリティのラベルでも同様のことが起こっていると思います。最後に、フォームは実際にはボックスにとどまっていません。右側の Span4 ブロックのラベルは、左側の Span4 と重なっています。これらすべての問題を引き起こしているのは何ですか？

4

1 に答える 1

1

バディ、

固定幅レイアウトとフォーム水平を使用してそのレイアウトを実現する場合、フォームは span4 列に収まりません。その目的のために基本的なフォームを使用することができます。 

 <form class="well">.

また、行と列の適切なネストを実装する必要があります。そのようです、

<div class="row-fluid">
    <div class="span8">
        <div class="row-fluid">
            <div class="span4">
                Some Content Here...
            </div>
            <div class="span4">
                Some Content Here...
            </div>
        </div><!-- row-fluid end-->
    </div><!-- span8 end-->

    <div class="span4">
        Some Content Here...
    </div><!-- span4 left-col end-->
</div><!--row fluid end-->

そして、列にフォームを詰め込みたい場合は、ここに例があります...

<div class="row">
<div class="span8">
    <div class="row">
        <div class="span4">
            <form class="well">
                <label>Label name</label>
                <input type="text" placeholder="Type something…" class="span3">
                <p class="help-block">Example block-level help text here.</p>
                <label class="checkbox">
                  <input type="checkbox"> Check me out
                </label>
                <button class="btn" type="submit">Submit</button>
            </form>
        </div>
        <div class="span4">
        <form class="well">
            <label>Label name</label>
            <input type="text" placeholder="Type something…" class="span3">
            <p class="help-block">Example block-level help text here.</p>
            <label class="checkbox">
              <input type="checkbox"> Check me out
            </label>
            <button class="btn" type="submit">Submit</button>
        </form>
        </div>
    </div>
</div><!-- span8 end-->

<div class="span4" id="side">
    <form class="well">
        <label>Label name</label>
        <input type="text" placeholder="Type something…" class="span3">
        <p class="help-block">Example block-level help text here.</p>
        <label class="checkbox">
          <input type="checkbox"> Check me out
        </label>
        <button class="btn" type="submit">Submit</button>
    </form>
 </div><!--row fluid end-->

上記のコードは、画像に似た出力をレンダリングしますここに画像の説明を入力

于 2012-08-24T15:19:19.200 に答える