web-dev-qa-db-ja.com

Bootstrap 3：1行で2つのフォーム入力を取得し、個々の行で他の入力を取得する方法

登録ページをBootstrap 3.1.1でフォーマットしようとしています。最初の2つの入力が同じ行にあり、他の入力が1行であるようにしたいと思います。 bootstrapクラスの "row"、 "form-inline"、および "form-horizo​​ntal"を試してみましたが、役に立ちませんでした。

誰もそれを行う方法を知っていますか？

これが Fiddle です

<style>
.reg_name {
 max-width:200px;
}
</style>


<form name="registration_form" id='registration_form' class="form-inline">

        <div class="form-group">
            <label for="firstname" class="sr-only"></label>
            <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
                   title="Enter first name"
                   placeholder="First name"/>
        </div>

        <div class="form-group">
            <label for="lastname" class="sr-only"></label>
            <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
                   title="Enter last name"
                   placeholder="Last name"/>
        </div>

    <div class="form-group">
        <label for="username" class="sr-only"></label>
        <input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
               title="Enter username"
               placeholder="Username"/>
    </div>

    <div class="form-group">
        <label for="password" class="sr-only"></label>
        <input id="password" class="form-control input-group-lg" type="password" name="password"
               title="Enter password"
               placeholder="Password"/>
    </div>

 </form>
htmlcsstwitter-bootstraptwitter-bootstrap-3
35
fat fantasma

<div class="row">と<div class="form-group col-xs-6">を使用します

ここでフィドル： https://jsfiddle.net/core972/SMkZV/2/

68
Core972

入力をcol-*クラスでラップできます

<form name="registration_form" id="registration_form" class="form-horizontal">
     <div class="form-group">
           <div class="col-sm-6">
             <label for="firstname" class="sr-only"></label>
             <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name">
           </div>       
           <div class="col-sm-6">
             <label for="lastname" class="sr-only"></label>
             <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name">
           </div>
    </div><!--/form-group-->

    <div class="form-group">
        <div class="col-sm-12">
          <label for="username" class="sr-only"></label>
          <input id="username" class="form-control input-group-lg" type="text" autocapitalize="off" name="username" title="Enter username" placeholder="Username">
        </div>
    </div><!--/form-group-->

    <div class="form-group">
        <div class="col-sm-12">
        <label for="password" class="sr-only"></label>
        <input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password">
        </div>
    </div><!--/form-group-->
 </form>

http://bootply.com/127825

17
Zim

1つのdiv内に2つの入力ボックスのようにコーディングできます

<div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input style="width:50% " class="form-control " placeholder="first name"  name="firstname" type="text" />
            <input style="width:50% " class="form-control " placeholder="lastname"  name="lastname" type="text" />
        </div>
9
Suwarnakumar Kanapathipillai

入力にインラインブロックを使用して、フィールドをほとんどオーバーライドする2つのスタイルカスケードを作成することにしました。

.input-sm {
    height: 2.1em;
    display: inline-block;
}

そして、％ではなく一連の固定サイズ

.input-10 {
    width: 10em;
}

.input-32 {
    width: 32em;
}
1
Jacques Amar