0

ここに画像の説明を入力ブートストラップを使用したログイン画面の次のコードがあります。フォーム入力フィールドと同じ行にラベルを揃えるのを手伝ってください。 

<div class="container">  
<div class="row">
    <div class="col-md-6">
      <div>
        <form class="form-horizontal">
        <fieldset>
        <legend>Existing Customer</legend>
        <div class="control-group">
        <label class="control-label" for="user">User Name:</label>
        <div class="control-group">
        <input type="text" class="textbox" id="user">
        </div>
        <label class="control-label" for="pwd">Password:</label>
        <div class="controls">
        <input type="text" class="textbox" id="pwd">
        </div>
        <div class="controls">
        <input class="btn btn-primary" name="commit" type="submit" value="Log In" />
        </div>
        </div>
        </fieldset>
        </form>
      </div>      
    </div>

  <div class="col-md-6">
        <legend>New Customer</legend>    
  </div>

4

3 に答える 3

0

Bootstrap 3 を使用したコードは次のとおりです。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-horizontal" role="form">
                <fieldset>
                    <legend>Existing Customer</legend>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="user">User Name:</label>
                        <div class="col-sm-4">
                            <input type="text" class="textbox form-control" id="user">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="pwd">Password:</label>
                        <div class="col-sm-4">
                            <input type="text" class="textbox form-control" id="pwd">
                        </div>
                    </div>
                    <div class="form-group">
                        <input class="btn btn-primary" name="commit" type="submit" value="Log In" />
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="col-md-6">
            <legend>New Customer</legend>
        </div>
    </div>

およびそれぞれのフィドル: http://jsfiddle.net/G2cgf/

于 2014-03-06T15:17:04.467 に答える