ボタン入力フィールド

Question

https://jsfiddle.net/p5thLuwo/

に沿ったもので、私は場合、私のフォーム

HTML

<div class="row" align="center"> 
    <form id="form" name="form" style="width:80%"> 

     <div class="form-group col-md-6 col-sm-12 col-xs-12"> 
      <label for="ptxt">Name:</label> 
      <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/> 
     </div> 


     <div class="form-group col-md-2 col-sm6 col-xs-6"> 
      <label for="qtxt">Qty:</label> 
      <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/> 
     </div> 

     <div class="form-group col-md-2 col-sm6 col-xs-6"> 
      <label for="ctxt">Cost per Item:</label> 
      <input id="ctxt" type="text" name="ctxt[]" class="form-control" /> 
     </div> 

      <button name="submit" id="submit" type="button" value="+" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></button> 

    </form> 
</div> 

の入力フィールドと整列するために私の送信ボタンを得ることができないではありません私はラベルと入力フィールドと同じプロパティを追加しますが、それは正しく配置されていますが大きすぎます。また、ラベルも必要としません。

<div class="row" align="center"> 
<form id="form" name="form" style="width:80%"> 

    <div class="form-group col-md-6 col-sm-12 col-xs-12"> 
     <label for="ptxt">Name:</label> 
     <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/> 
    </div> 


    <div class="form-group col-md-2 col-sm6 col-xs-6"> 
     <label for="qtxt">Qty:</label> 
     <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/> 
    </div> 

    <div class="form-group col-md-2 col-sm6 col-xs-6"> 
     <label for="ctxt">Cost per Item:</label> 
     <input id="ctxt" type="text" name="ctxt[]" class="form-control" /> 
    </div> 

    <div class="form-group col-md-2 col-sm6 col-xs-6"> 
     <label for="submit">.</label> 
     <button name="submit" id="submit" type="button" value="+" class="btn btn-success form-control"><span class="glyphicon glyphicon-plus"></span></button> 
    </div> 

</form> 
</div> 

は、だから私は、最初の画像のようが、第2の画像のアライメントを見て、ボタンを取得しようとしている要約します。

Answer 1

ダミーCSSクラス（ここでABC）

<div class="row" align="center"> 
    <form id="form" name="form" style="width:80%"> 

     <div class="form-group col-md-6 col-sm-12 col-xs-12"> 
      <label for="ptxt">Name:</label> 
      <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/> 
     </div> 


     <div class="form-group col-md-2 col-sm6 col-xs-6"> 
      <label for="qtxt">Qty:</label> 
      <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/> 
     </div> 

     <div class="form-group col-md-2 col-sm6 col-xs-6"> 
      <label for="ctxt">Cost per Item:</label> 
      <input id="ctxt" type="text" name="ctxt[]" class="form-control" /> 
     </div> 
     <div class="form-group col-md-2 col-sm6 col-xs-6 abc"> 
      <button name="submit" id="submit" type="button" value="+" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></button> 
     </div> 


    </form> 
</div> 

を追加し、それを3％

としてマージントップを与えます

.abc { 
    margin-top: 3%; 
} 

ここはjsfidですdle https://jsfiddle.net/jk5hksue/

Answer 2

2つの余分なブートストラップ列を追加：

<div class="row" align="center"> 
<form id="form" name="form" style="width:80%"> 
    <div class="col-xs-11"> 
     <div class="form-group col-md-6 col-sm-12 col-xs-12"> 
      <label for="ptxt">Name:</label> 
      <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/> 
     </div> 


     <div class="form-group col-md-2 col-sm6 col-xs-6"> 
      <label for="qtxt">Qty:</label> 
      <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/> 
     </div> 

     <div class="form-group col-md-2 col-sm6 col-xs-6"> 
      <label for="ctxt">Cost per Item:</label> 
      <input id="ctxt" type="text" name="ctxt[]" class="form-control" /> 
     </div> 

     <div class="col-xs-1"> 
      <button name="submit" id="submit" type="button" value="+" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></button> 
     </div> 
    </div> 
</form>