3

Twitter ブートストラップを使用して管理パネルのスタイルを設定していますが、これは非常に奇妙な動作です。Chrome 28 と Firefox でテストしましたが、単純な非表示の入力を追加するとグリッドが台無しになります。

非表示の入力を移動するdiv.span6か、完全に削除すると、意図したとおりに機能しますが、そこにとどまると、行が折りたたまれ、適切に機能しません。適切とは、それらが上ではなく、互いに隣り合っていることを意味します。

フィドル: http://jsfiddle.net/EZMvB/

<div class="container-fluid">
    <form action="/admin/category/create" class="row-fluid" method="post">
        <input type="hidden" name="WAT" value="WAT" />
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
    </form>
</div>

問題の写真

4

2 に答える 2

1

コードに複数の行が必要になる可能性がある場合、常に1行になるため、一般的row-fluidにタグにクラスを配置することは悪い習慣です。<form>

jsFiddleの例

コード：

<form action="/admin/category/create"  method="post" novalidate="novalidate">
    <input type="hidden" />
    <div class="row-fluid" >
         <div class="span6">
             <label for="NameEnglish">Name (English)</label>
             <input class="input-block-level" data-val="true" data-val-required="'Name English' should not be empty." id="NameEnglish" name="NameEnglish" type="text" value="">
         </div>
         <div class="span6">
             <label for="NameEnglish">Name (English)</label>
             <input class="input-block-level" id="NameEnglish" name="NameEnglish" type="text" value="">
         </div>
             <input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
   </div>
</form>
于 2013-06-28T17:41:30.963 に答える
1

非表示フィールド ( http://jsfiddle.net/EZMvB/1/ )を移動すると、希望どおりに動作するようです。のデフォルトのスタイルはdisplay: noneレイアウトに影響を与えないようにする必要があるため、配置が重要な理由がわかりませんか?

<div class="container-fluid">
    <form action="/admin/category/create" class="row-fluid" method="post">
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
        <input type="hidden" name="WAT" value="WAT" />
    </form>
</div>
于 2013-06-28T17:26:11.377 に答える