Bootstrap Input Group Resize Issue

Question

Я довольно новичок в разработке интерфейса и пытаюсь понять, что моя группа загрузочного ввода продолжает делать это при тестировании на мобильных устройствах. Любая помощь/совет будут оценены с благодарностью.

Вот HTML я использую для этого.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-10 col-md-offset-1"> 
 
    <form id="Form_UniversitySearch"> 
 
    <div class="input-group"> 
 
     <input id="query" name="query" class="form-control input-lg" type="text" placeholder="Search..." style="height: 46px;"> 
 
     <div class="input-group-btn"> 
 
     <a href="#" class="btn btn-primary btn-lg">Search for University</a> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 1

Я думаю, что ваш код почти правильно.

Я реализовал код здесь ->DEMO

HTML код:

<div class="container wrap"> 

    <div class="row"> 
     <div class="col-md-10 col-md-offset-1">    
      <form id="Form_UniversitySearch"> 
       <div class="input-group"> 
        <input id="query" name="query" class="form-control input-lg" type="text" placeholder="Search..."> 
         <div class="input-group-btn"> 
          <a href="#" class="btn personal-button btn-primary btn-lg">Search for University</a> 
         </div> 
         </div> 
        </form> 
     </div> 
    </div> 

</div> 

так .. Я думаю, что должно быть что-то неправильно в вашем css коде.

Надеюсь, это поможет.

Примечание: я удалил стиль, который вы добавили на входе style="height: 46px;", так что, возможно, это была проблема.