2

ブートストラップでフォームの水平フォームを作成しようとしていますが、コントロール フィールドに input-append を追加しようとすると、そのフィールドが右にシフトします。なぜそれが起こっているのかの正確な原因を見つけることができません...または何か間違ったことをしているのであれば。パスワード入力フィールドを使用して単純な PWD を追加しようとしています...

<form class="bs-docs-example form-horizontal">
            <div class="control-group">
              <label class="control-label" for="inputEmail">Email</label>
              <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="inputPassword">Password</label>
              <div class="controls input-append">
                <input type="password" id="inputPassword" placeholder="Password">
                    <span class="add-on">PWD</span>
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox"> Remember me
                </label>
                <button type="submit" class="btn">Sign in</button>
              </div>
            </div>
          </form>

ここにjsfiddleがあります.. http://jsfiddle.net/zEUH4/

ありがとう。

4

3 に答える 3

4

正しい構造は次のとおりです。

<div class="control-group">
  <label class="control-label" for="inputPassword">Password</label>
  <div class="controls">
    <div class="input-append">
      <input type="password" id="inputPassword" placeholder="Password">
      <span class="add-on">PWD</span>
    </div>
  </div>
</div>
于 2013-07-16T11:38:29.750 に答える
3

input-append クラスを取得して、それを control-group div に移動すると、問題が解決するはずです。

http://jsfiddle.net/zEUH4/1/

<div class="control-group input-append">
  <label class="control-label" for="inputPassword">Password</label>
  <div class="controls">
    <input type="password" id="inputPassword" placeholder="Password">
    <span class="add-on">PWD</span>
  </div>
</div>
于 2013-02-08T12:09:37.890 に答える
2

クラスはに.input-append追加display: inline-block;され<div>ます。は、通常は左端から 180 ピクセルの に を追加しますが、現在は から180ピクセル.controlsです。margin: 180px<div><label>

これら 2 つのクラスは、1 つの要素で使用することを意図していません。

<form class="bs-docs-example form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
            <input type="text" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputPassword">Password</label>
        <div class="controls">
            <div class="input-append">
                <input type="password" id="inputPassword" placeholder="Password">
                <span class="add-on">PWD</span>
            </div>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <label class="checkbox"><input type="checkbox">Remember me</label>
            <button type="submit" class="btn">Sign in</button>
        </div>
    </div>
</form>

フィドルを見る

または、 を に設定<div>しdisplay: blockます。

<div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls input-append" style="display: block">
        <input type="password" id="inputPassword" placeholder="Password">
        <span class="add-on">PWD</span>
    </div>
</div>
于 2013-02-08T12:20:26.740 に答える