帶有圖標的CSS Bootstrap 3.0字段

Question

我有一個帶有3個字段的表單，其中兩個用於輸入日期。我被要求在該領域的最後添加一個圖標。

這是結果：

如果你看到有圖標擴展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系列顯然發生故障。 我做了一個例子：

https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR

檢查，如果您有壓倒一切白手起家一些自定義CSS。

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>