side-by-side-text-Felder mit bootstrap 3

Ich versuche, text-Felder mit label oberhalb der Textfelder und text-Felder nebeneinander.

<form class="form form-horizontal" action="##" method="post" id="registrationForm">
        <fieldset>
            <div class="form-group">
                <label class="col-xs-2 control-label" for="first_name" >first name</label>
                <div class="col-xs-4">
                    <input type="text" class="form-control" name="first_name" id="first_name" placeholder="first name" title="enter your first name if any.">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label" for="last_name" >Last name</label>
                <div class="col-xs-4">
                    <input type="text" class="form-control" name="last_name" id="last_name" placeholder="last name" title="enter your last name if any.">
                </div>
            </div>

            <div class="form-group">
                <label class="col-xs-2 control-label" for="phone" >phone</label>
                <div class="col-xs-4">
                    <input type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any.">
                </div>
            </div>

            <div class="form-group">
                <label class="col-xs-2 control-label" for="mobile" >mobile</label>
                <div class="col-xs-4">
                    <input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any.">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label" for="email" >email</label>
                <div class="col-xs-4">
                    <input type="email" class="form-control" name="email" id="email" placeholder="Email" title="enter your email.">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label" for="password" >password</label>
                <div class="col-xs-4">
                    <input type="password" class="form-control" name="password" id="password" placeholder="password" title="enter your password.">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label" for="password2" >password</label>
                <div class="col-xs-4">
                    <input type="password" class="form-control" name="password2" id="password2" placeholder="password2" title="enter your password2.">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label"></label>
                <div class="col-xs-4">
                    <input type="checkbox" />
                    <span class="lbl">User Agreement</span>
                </div>
            </div><br />
            <div class="form-actions">
                <div class="col-md-offset-2 col-md-4">
                    <button class="btn btn-sm btn-success" type="submit">
                        <i class="glyphicon glyphicon-ok-sign"></i>
                        Register
                    </button>
                     &nbsp; &nbsp;
                    <button class="btn btn-sm" type="reset">
                        <i class="glyphicon glyphicon-repeat"></i>
                        Reset
                    </button>
                </div>
            </div>
        </fieldset>
    </form>

Ich bin mit Bootstrap 3, kann mir jemand sagen, wie man den text-Feldern Seite an Seite mit der Beschriftung oben. Danke.

  • Was ist das Problem, das Sie gerade haben? Können Sie erstellen, die eine Geige in der Vitrine dieses Problem?
  • Meinst du so etwas wie dieser (unter dem Abschnitt "Spalte sizing")
  • jetzt bin ich immer label und textfield, Seite an Seite, als ich versuchte, verwenden Sie die form-inline-hab es versaut. Ich bin auf der Suche nach so etwas wie dies zum Beispiel [idp.godaddy.com/...
  • eigentlich will ich wissen, was ich brauche, zu verwenden, um die Felder nebeneinander und das label über die Felder. irgendeine Idee ?
InformationsquelleAutor Suleman khan | 2014-03-28
Schreibe einen Kommentar