0

私は次のフォームを持っています.3つのアイテムを続けて持ちたいです。
自動生成されるので、html を変更することはできません。
各列の動的スパンを持つことはできません。
私がここに持っている制限により、以下のコードを壊して、3 つのフィールドを続けて持つことは可能ですか?

http://fiddle.jshell.net/52VtD/446/

<div class="row-fluid">
  <input id="Id" name="Id" type="hidden">
  <div class="span1">
    <label>
      Email Address
    </label>
    <input class="form-control" id="Email" name="Email" type="text">
  </div>
  <div class="span1">
    <label>
      Full Name
    </label>
    <input class="form-control" id="FullName" name="FullName" type="text">
  </div>
  <div class="span1">
    <label>
      Active?
    </label>
    <input class="form-control" id="IsActive" name="IsActive" type="text">
  </div>
  <div class="span1">
    <label>
      Password
    </label>
    <input class="form-control" id="Password" name="Password" type="password">
  </div>
  <input name="Avatar.Id" type="hidden">
  <div class="span1">
    <label>
      Upload image
    </label>
    <input class="form-control" id="Avatar.FileContent" name="Avatar.FileContent" placeholder="Select an image" type="file">
  </div>
</div>
4

2 に答える 2

1

Bootstrap を考えすぎないことが役立つ場合もあります。また、これは私が使用しているBootstrap 3です。

ラベルを含めて「3 つのアイテム」を 1 行に並べたい場合は、6 列で作成できます。ラベルごとに 3 つ、入力ごとに 3 つ。

http://fiddle.jshell.net/pLSD9/1/

この場合、 のような組み込みのフォーム レイアウトは使用しません.form-inline。Bootstrap グリッドを使用し、それに応じて要素を配置します。Bootstrap はフォーム入力要素に 100% の幅を与えるため、グリッド スペースを埋めます。

「sm」サイズのグリッドを使用したので、フォームが Bootstrap が「小さい」サイズと見なすサイズになると、要素がスタックされます。JSFiddle はページをウィンドウに表示するため、グリッド レイアウトを表示するにはウィンドウ サイズを調整する必要がある場合があります。

それが役立つことを願っています！乾杯！

于 2013-11-02T05:27:29.597 に答える
0

Bootstrap を大幅に壊すことになりますが、コンテナに を指定して、次のidようにスタイルを設定できるとしたら、次のようになります。

#form-container {
    width: 700px;
}

#form-container .row-fluid .span1 {
    float: left;
    margin-right: 10px;
}

この結果を取得するには: http://fiddle.jshell.net/52VtD/448/

于 2013-11-02T05:02:16.340 に答える