文本输入内的图标字体

Question

如何将引导输入类型文本中的真棒图标字体放在左侧对齐并带有一些相对于使用引导程序的占位符文本的边距？林做这样：https://jsfiddle.net/tbeay2vd/1/，并使用引导类“输入组插件”它的工作原理，但我想有一个像输入文本：

你知道如何，使用自举办？

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>