html - 入力グループ IN ブートストラップ 3 の最後に検索アイコンを追加します。

Question

フォームは 2.4.3 以降に変更されており、これは以前は機能していましたが、現在は機能していません。

これは、検索バー用に現在持っているコードです。

<li>
   <div class="input-group" id="fifteenMargin">
      <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
   </div>
</li>

これが現在の外観です。

最終的にはこんな感じにしたいです。

この質問はこれに近いですが、2つの間にスペースのない外側にボタンがあるだけなので、違います. これは、検索バーにそれを取得する方法です。

Answer 1

これを試して..

.input-group-btn > .btn {
  border-left-width:0;left:-2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.input-group .form-control:focus {
 box-shadow:none;
 -webkit-box-shadow:none; 
 border-color:#cccccc; 
}

input-groupすべてのをオーバーライドする代わりに、特別な CSS クラスを使用したい場合があります。

デモ: http://bootply.com/86446

Answer 2

試す

<div class="input-group">
    <span class="input-group-addon">
        <i class="glyphicon glyphicon-user"></i>
    </span>
    <input type="text" name="login" class="form-control" placeholder="Ваш логин">
</div>