응답 부트 스트랩 입력

Question

<form id="form-search" name="form-search" class="form-inline" action="/"> 
    <div class="input-group"> 
     <span class="input-group-btn"> 
      <button id="gps" type="button" class="btn gps">GPS</button> 
     </span> 
     <input id="address" name="address" type="text" class="form-control address text-center" placeholder="Enter Address" /> 
     <span class="input-group-btn"> 
      <input id="submit" name="submit" type="submit" class="btn submit" value="Search" /> 
     </div> 
    </div> 
</form> 

내가 이상적으로 새로운 라인에 휴식 작은 장치의 검색 버튼 (내 의원 찾기) 원하는 대신에 원인이있어 같은 줄에 있기 때문에 휴식보기. 그리고 그것이 깨지면, 나는 입력 필드 (주소)를 반올림하기를 원할 것입니다. 오른쪽에 편평하지 않고 양쪽에 둥근 검색 버튼이 있습니다. 부트 스트랩의 그룹과 관련이 있다고 생각하지만, 적절한 방법을 찾아 내지 못합니다.

Answer 1

https://jsfiddle.net/luciocamilo/e712fj68/

<form id="form-search" name="form-search" class="form-inline" action="/"> 
    <div class="input-group"> 
     <span class="input-group-btn"> 
      <button id="gps" type="button" class="btn gps">GPS</button> 
     </span> 
     <input id="address" name="address" type="text" class="form-control address text-center" placeholder="Enter Address" /> 
     <span class="input-group-btn"> 
      <input id="submit" name="submit" type="submit" class="btn submit visible-sm visible-md visible-lg" value="Search" /> 
     </div> 
     <div class="btn btn-danger btn-block hidden-sm hidden-md hidden-lg">Search</div> 
    </div> 
</form> 

당신은 당신의 코드에서이 작업을 수행 할 볼 숨겨진 클래스를 사용할 수 있습니다. 당신이해야 할 일은 버튼의 기본값을 xs (숨김 -xs)에 숨겨 놓고 '새 버튼'을 visible-xs로 두는 것입니다.

또한 클래스의 btn 블록을 사용하여 버튼의 전체 너비를 사용할 수 있습니다.