부트 스트랩 - 텍스트 상자가있는 단추를 세로로 정렬 할 수 없습니다.

Question

부트 스트랩에 꽤 새로워서 어떻게 내 탐색 단추의 텍스트 상자에 검색 단추를 정렬 할 수 있습니까? 나는 행운이없이 몇 시간을 노력했다.

http://bildr.no/image/TDhPNWZZ.jpeg

그리고 이것은 내 코드입니다 :

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
 
    <div class="col-sm-6 col-md-6"> 
 
    <form class="navbar-form" role="search" method="get" id="search-form" name="search-form"> 
 
     <div class="input-group"> 
 

 
     @using (Html.BeginForm("Search", "Product", FormMethod.Get)) { 
 
     <div class="input-group"> 
 
      @Html.TextBox("searchString", null, new { id = "txtSearch", @class = "form-control", placeholder = "Søk etter vare..." }) 
 
     </div> 
 
     } 
 
     <div class="input-group-btn"> 
 
      <button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span> 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div>

편집 : 렌더링 코드 :

<div class="container"> 
 
    <div class="row"> 
 
    <div class="navbar navbar-inverse" role="navigation"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="/">Alkohol Mekka</a> 
 

 
     </div> 
 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
 
     <div class="col-sm-6 col-md-6"> 
 
      <form class="navbar-form"> 
 
      <div class="input-group"> 
 
       <form action="/Product/Search" method="get"> 
 
       <input class="form-control" id="txtSearch" name="searchString" placeholder="Søk etter vare..." type="text" value="" /> 
 
       </form> 
 
       <div class="input-group-btn"> 
 
       <button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span> 
 
       </button> 
 
       </div> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="/Customer/Register">Registrer</a> 
 
      </li> 
 
      <li><a href="/Customer/LogIn">Logg Inn</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

그것은 보이는 방법이다

Answer 1

중첩 된 입력 그룹 클래스가 잘못 구성되었습니다. 이 같은해야 할 때

<form class="navbar-form" role="search" method="get" id="search-form" name="search-form"> 
     <div class="input-group">!-- it starts here --> 

     @using (Html.BeginForm("Search", "Product", FormMethod.Get)) { 
     <div class="input-group"> 
      @Html.TextBox("searchString", null, new { id = "txtSearch", @class = "form-control", placeholder = "Søk etter vare..." }) 
     </div> 
     } 
     <div class="input-group-btn"> 
      <button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span> 
      </button> 
     </div> 
     </div><!-- and ends here --> 
    </form> 

이 : 기본적으로

<form class="navbar-form" role="search" method="get" id="search-form" name="search-form"> 
     <div class="input-group"> 

     @using (Html.BeginForm("Search", "Product", FormMethod.Get)) { 

      @Html.TextBox("searchString", null, new { id = "txtSearch", @class = "form-control", placeholder = "Søk etter vare..." }) 

     } 
     <div class="input-group-btn"> 
      <button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span> 
      </button> 
     </div> 
     </div> 
    </form> 

를 하나 개 .input-group 클래스를 제거하고 외부 input-group 내부의 전체 형태 (포함 버튼)이 필요합니다 그래서 당신이 있습니다

편집 : 당신의 렌더링되지 않은 코드는 문제를 (정말 모르겠다) 여기 그냥 기본 HTML 태그와 함께 작동하는 방법을 보여주기 위해 Bootply있어이 기회있을 때문에

,