Как разместить значок внутри тега ввода в asp.net mvc5?

Question

Я новичок в asp.net mvc5. Я пытался поместить значок поиска внутри строки поиска, но он появляется за пределами панели. может ли кто-нибудь сказать решение? вот снимок и код. enter image description here

и код здесь ..

<div class="banner-g"> 
     <div class="container"> 
      <div id="user-info"> 
       <div class="navbar-form navbar-right"> 
        <form action="/home/browse" id="searchForm" method="get"> 

         <div class="inner-addon left-addon"> 
          <a href="#" id="submitSearch" style="text-decoration: none; right: 14px; color: rgb(204, 204, 204); top: 6px; "> <i class="glyphicon glyphicon-search"></i></a> 
          <input class="form-control input-sm" data-val="true" data-val-length="The field Search must be a string with a maximum length of 150." data-val-length-max="150" data-val-regex="Please only use letters, numbers, spaces, periods, commas, question/ exclamation marks, dollar sign, underscores, hyphens, apostrophes, parentheses, forward and back slashes, colon and semi colons" data-val-regex-pattern="^[0-9a-zA-Z/&#39;() .,!?$:-;_-]+$" id="Search" name="Search" placeholder="Search Markets" type="text" value="" /> 
          &nbsp; 

          <input type="hidden" name="isSearch" value="true"> 
         </div> 

        </form> 

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

и в загрузочном файле

.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    -webkit-font-smoothing: antialiased; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
} 

Я буду благодарен за помощь.

Answer 1

Вы должны изучить использование компонента входной группы Bootstrap. Вы можете найти его документально зарегистрированным here.

Как это:

<div class="input-group"> 
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> 
    <span class="input-group-addon glyphicon glyphicon-search" aria-hidden="true"></span> 
</div> 

Вот demo.

Answer 2

Я думаю, что вы на правильном пути, но ваша проблема - вопрос из двух частей. Вы можете использовать .input-group-addon, чтобы разместить значок поиска рядом с поисковым сообщением. Затем вы можете использовать css для его стилизации, чтобы он выглядел как часть панели поиска. Стиль его, однако, ваше сердце желает.

Работает demo.