css - 文本输入内的图标字体

Question

如何使用 bootstrap 在 bootstrap 输入类型文本中放置一个很棒的图标字体，左对齐并相对于占位符文本有一些 margin-right？我这样做:https://jsfiddle.net/tbeay2vd/1/并使用 Bootstrap 类“input-group-addon”它可以工作，但我想要一个输入文本:

你知道如何使用 bootstrap 做到这一点吗？

HTML:

<div class="container">
  <div class="row justify-content-center">
    <div class="col col-md-7">


      <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-search"></i></div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
      </div>

    <!-- How to do this input text below using bootstrap ? -->

      <div class="example">
          <i class="fa fa-search"></i> Search..
      </div>


    </div>
  </div>
</div>

Answer 1

试试这个:

$('input').on('focus', function () {
    $(this).parent().addClass('active');
});

.example {
  margin-top:30px;
  border:1px solid gray;
  border-radius:4px;
  padding:15px;
}
.example >i {
  margin-right:10px;
}
.search-input { 
  border: none;
  width: 90%;
}
.search-input:focus{ 
  outline: none;
}
.example.active {
 border-color: #80bdff;
}
.search-box .input-group-addon {
  background: none;
} 
.search-box input {
  border-left: none;
}
.search-box.active .input-group-addon {
  border-color: #80bdff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row justify-content-center">
    <div class="col col-md-7">

      <div class="input-group search-box">
        <div class="input-group-addon"><i class="fa fa-search"></i></div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
      </div>
    
    <!-- Hpw to do this layout using bootstrap ? -->

      <div class="example">
          <i class="fa fa-search"></i>
          <input type="text" class="search-input" id="inlineFormInputGroup" placeholder="Search...">
      </div>

    </div>
  </div>
</div>