入力フォームの配置方法は？

Question

私はフロントエンドの開発では強くない:)私はフォームを作成するためにブートストラップを使用しています。しかし、それはよく見えません。入力フォームを1列に整列させるにはどうすればよいですか？

<form> 
 
    <div class="form-group form-inline"> 
 
     <label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label> 
 
     <input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$"> 
 
    </div> 
 
    <div class="form-group form-inline"> 
 
     <label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label> 
 
     <input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$"> 
 
    </div> 
 
    <div class="col-md-12 text-center block-buttons"> 
 
     <button type="submit" class="btn btn-primary btn-lg">Continue</button> 
 
    </div> 
 
</form>

enter image description here

Answer 1

利用display:table-*

table { 
 
    border-collapse: separate; 
 
} 
 

 
.form-inline { 
 
    display: table-row; 
 
} 
 

 
.form-inline label, .form-inline input { 
 
    display: table-cell; 
 
    margin: 0 0 5px 10px; 
 
}

<form> 
 
    <div class="form-group form-inline"> 
 
    <label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label> 
 
    <input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$"> 
 
    </div> 
 
    <div class="form-group form-inline"> 
 
    <label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label> 
 
    <input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$"> 
 
    </div> 
 
    <div class="col-md-12 text-center block-buttons"> 
 
    <button type="submit" class="btn btn-primary btn-lg">Continue</button> 
 
    </div> 
 
</form>

Answer 2

、このようにしてみ横長形ブートストラップブートストラップ-4 Not supportedでサポートしない、ブートストラップ3

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 

 

 

 
<form class="form-horizontal" action="/action_page.php"> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="Purchase Price">Purchase Price</label> 
 
     <div class="col-sm-4"> 
 
     <input type="email" class="form-control" id="exampleInputPrice" placeholder="$$$"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="Loan Amont">Loan Amont</label> 
 
     <div class="col-sm-4">   
 
     <input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$"> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="form-group">   
 
    <div class="col-sm-offset-2 col-sm-10"> 
 
    <button type="submit" class="btn btn-default">Continue</button> 
 
    </div> 
 
</div> 
 
    </form>

bootsrap-3 DOC https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal&stacked=h

Answer 3

を使用

ブートを使用している場合

<form> 

    <div class="form-group row"> 
    <label for="exampleInputPrice" class="col-sm-2 col-form-label">Purchase Price</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$"> 
    </div> 
    </div> 

    <div class="form-group row"> 
    <label for="exampleInputLoan" class="col-sm-2 col-form-label">Loan Amont</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$"> 
    </div> 
    </div> 

    <div class="form-group form-inline"> 
     <button type="submit" class="btn btn-primary btn-lg">Continue</button> 
    </div> 
</form> 

https://jsfiddle.net/sv2j08dd/3/

Answer 4

モジュレーション： ガラス厚：

CSS： .inputsスパン{表示：この試し4ストラップインラインブロック;幅：60％;パディング：0 0 15px 0; } .inputs span入力{width：30％; float：left;高さ：25px;パディング：0 5px;}

.inputs {width：100％; float：left; padding：0 25px;ボックスサイズ：ボーダー・ボックス;}

.inputsラベル{幅：20％;フロート：左;}