Как увеличить ширину строки поиска в заголовке

Question

Мне нужно увеличить ширину панели поиска и сделать границу невидимой, сохраняя при этом мобильную реакцию. Что-то вроде:

http://oneclass.com/#!/notes 

HTML

<a class="navbar-brand page-scroll" href="#page-top">dss</a> 
</div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <form class="navbar-form" role="search"> 
        <div class="input-group"> 
         <input type="text" class="form-control ipt" placeholder="Search" name="q"> 
         <div class="input-group-btn"> 
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
         </div> 
        </div> 
       </form> 
      </li> 
      <li> 
       <a href="study_material.php">Study Material</a> 
      </li> 
      <li> 
       <a href="about.php">About us</a> 
      </li> 
      <li> 
       <a href="">Blog</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

Вы можете сделать это с помощью CSS ... Просто добавить стиль к классу элемента, который вы хотите редактировать ...

I предположим, вы можете использовать примерно следующее:

.ipt { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0px; 
    border-bottom: 1px solid #ccc; 
    height: 50px; 
    font-size: 25px; 
    line-height: 45px; 
} 

DEMO

Answer 2

вы можете добавить некоторые CSS в тег ввода «text» (который с классом ipt здесь).

.ipt { 
    border:none; //make the border invisible 
    width:75%;  //set width to % instead of pixel to make it responsible. 
    height:50px; 
    font-size:22px; //control the text area's height of the text-input tag. 
} 

Здесь вы можете ознакомиться с простой демонстрацией. http://codepen.io/fukurouzhong/pen/JKdLVd