CSS Bootstrap 3.0アイコン付きアイコン

Question

私は3つのフィールドを持つフォームを持っています。そのうち2つは日付を入力するためのものです。私はフィールドの最後にアイコンを追加するように要求されました。

これが結果です：

あなたが表示された場合は、アイコンを持っている分野は、それはかなり醜いので、左右に他のフィールドをbeyonds展開します。

これはコードです：

<div class="form-horizontal"> 

    <div class="form-group"> 
     <label class="col-md-4 control-label">Begin</label> 
     <div class="col-md-8"> 
      <input type="text" class="form-control" placeholder="mm/dd/yyyy" /> 

     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-md-4 control-label">End</label> 
     <div class="input-group col-md-8"> 
      <input type="text" class="form-control" placeholder="mm/dd/yyyy" /> 
      <span class="input-group-addon"><i class="fa fa-lock"></i></span> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-md-4 control-label">Text Search</label> 
     <div class="col-md-5"> 
      <input type="text" class="form-control"> 

     </div> 
     <div class="col-md-3"> 

      <button id="btnSavedMessages" class="btn btn-primary">Search</button> 
     </div> 
    </div> 

</div> 

右のそれを行う方法上の任意の手がかり？

Answer 1

は、ここでそれをコピーし、それが

<div class="form-horizontal"> 

<div class="form-group"> 
    <label class="col-md-4 control-label">Begin</label> 
    <div class="col-md-8"> 
     <input type="text" class="form-control" placeholder="mm/dd/yyyy"> 

    </div> 
</div> 

<div class="form-group"> 
    <label class="col-md-4 control-label">End</label> 
    <div class="col-md-8"> 
     <div class="input-group "> 
     <input type="text" class="form-control" placeholder="mm/dd/yyyy"> 
     <span class="input-group-addon"><i class="fa fa-lock"></i></span> 
    </div></div> 
</div><div class="form-group"> 
    <label class="col-md-4 control-label">Text Search</label> 
    <div class="col-md-5"> 
     <input type="text" class="form-control"> 
    </div> 
    <div class="col-md-3"> 
     <button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div> 

私はそれが正常に動作テストして貼り付けてくださいあなたの固定コードです。乾杯！

Answer 2

一部のCSSはあなたを悩ませています。 input-group col-md-8の行は明らかに誤動作しています。あなたがブートストラップをオーバーライドしているいくつかのカスタムCSSを持っている場合は、

https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR

チェック： 私は例を作りました。

Answer 3

これは上手く動作しています。

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="form-horizontal"> 
 

 
    <div class="form-group"> 
 
    <label class="col-md-4 control-label">Begin</label> 
 
    <div class="col-md-8"> 
 
     <input type="text" class="form-control" placeholder="mm/dd/yyyy" /> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label class="col-md-4 control-label">End</label> 
 
    <div class="col-md-8"> 
 
     <div class="input-group"> 
 
     <input type="text" class="form-control" placeholder="mm/dd/yyyy" /> 
 
     <span class="input-group-addon"><i class="fa fa-lock"></i></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label class="col-md-4 control-label">Text Search</label> 
 
    <div class="col-md-5"> 
 
     <input type="text" class="form-control"> 
 

 
    </div> 
 
    <div class="col-md-3"> 
 

 
     <button id="btnSavedMessages" class="btn btn-primary">Search</button> 
 
    </div> 
 
    </div> 
 

 
</div>