テキストボックスの配置とコーナースタイルのフォーム

Question

フォームを整列してスタイルを設定しようとしています。私の最初の試みは、それは私が最初のテキストボックスを囲み、それはアライメントの問題を解決しdivにinput-groupを追加しようとしたが、私の2つのテキストボックスは、その左のエッジが異なっas seen here

を揃えています

<form action="myUrl" class="form-horizontal" method="post">  
    <div class="form-group"> 
     <label class="control-label col-sm-2">Set ID</label> 
     <div class="col-sm-4"> 
      <input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value=""> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Customer ID</label> 
     <div class="col-sm-4 input-group"> 
      <input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value=""> 
      <span class="input-group-btn"> 
       <button class="btn btn-default lookup-button" type="button"> 
        <span class="glyphicon glyphicon-search"></span> 
       </button> 
      </span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <input class="btn btn-default" type="submit" id="submit" value="Search"> 
    </div> 
</form> 

だったが、テキストボックスの角が硬くコーナーになることを原因というよりas seen here

<form action="myUrl" class="form-horizontal" method="post">  
    <div class="form-group"> 
     <label class="control-label col-sm-2">Set ID</label> 
     <div class="col-sm-4 input-group"> 
      <input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value=""> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Customer ID</label> 
     <div class="col-sm-4 input-group"> 
      <input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value=""> 
      <span class="input-group-btn"> 
       <button class="btn btn-default lookup-button" type="button"> 
        <span class="glyphicon glyphicon-search"></span> 
       </button> 
      </span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <input class="btn btn-default" type="submit" id="submit" value="Search"> 
    </div> 
</form>  

を四捨五入している私も自分の中に空の<span>を追加してみました最初のテキストボックスと、input-groupクラス。これにより、左隅が丸くなりますが、右隅は四角いままになります。右端も、その下のテキストボックスの右端とわずかにずれて表示されます。as shown here

テキストボックスが左端に均等に配置されるようにする方法はありますか？コーナー（余分なアイコンを最初のテキストボックスに追加しないで）？

Answer 1

あなたが別のdivの中にクラス入力グループを使用する必要があり、これは入力behavorの問題を解決します

は、コードスニペット参照してください。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form action="myUrl" class="form-horizontal" method="post"> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2">Set ID</label> 
 
    <div class="col-sm-4"> 
 
     <input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value=""> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 

 
    <label class="control-label col-sm-2">Customer ID</label> 
 
    <div class="col-sm-4"> 
 
     <div class="input-group"> 
 
     <input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value=""> 
 
     <span class="input-group-btn"> 
 
      <button class="btn btn-default lookup-button" type="button"> 
 
       <span class="glyphicon glyphicon-search"></span> 
 
     </button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2"></label> 
 
    <div class="col-sm-4"> 
 
     <input class="btn btn-default" type="submit" id="submit" value="Search"> </div> 
 
    </div> 
 
</form>

Answer 2

これを試してみてくださいを

CSS

私はあなたのhtmlの一部を変更した

.lookup-button span.glyphicon{ 
    border-left:1px solid #e1e1e1; 
    padding:8px; 
} 

HTML

<form action="myUrl" class="form-horizontal" method="post"> 

    <div class="form-group"> 
    <label class="control-label col-sm-2">Set ID</label> 
    <div class="col-sm-5"> 
     <input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value=""> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label class="control-label col-sm-2">Customer ID</label> 
    <div class="col-sm-5"> 
     <input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value=""> 
    </div> 
    </div> 


    <div class="form-group"> 
     <button class="btn btn-default lookup-button" type="submit"> 
     submit 
     <span class="glyphicon glyphicon-search"></span> 
     </button> 
    </div> 
</form> 

。ここでは入力タイプ[submit]を使用する必要はありません。それは同じように機能します。

私は送信ボタンをスタイルといくつかのコードを組織してい

Link for Reference

希望これは