文字输入

Question

如何在左侧对齐的引导输入类型文本中放置一个令人敬畏的图标字体，并使用引导程序相对于占位符文本使用一些右边距？我这样做：https://jsfiddle.net/tbeay2vd/1/并使用bootstrap类＆＃34; input-group-addon＆＃34;它有效，但我希望有一个输入文本，如：

你知道如何使用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>

Answer 2

.input-group >.fa{
    position: absolute;
    z-index: 10;
    top: 37%;
    left: 20px;
}
.input-group .form-control{
    padding-left: 40px;
    height: 60px;
    border: black solid 1px;
    position: relative;
    border-radius: 5px!important; 
}

<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">
        <i  class="fa fa-search"></i>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
      </div>
    </div>
  </div>
</div>