부트 스트랩 3의 입력/크기 상자의 크기를 조정하는 방법

Question

데스크톱/태블릿 해상도에서 완벽하게 표시되는 부트 스트랩 3 프레임 워크를 사용하여 제출 상자와 함께 상당히 간단한 큰 입력이 있지만 모바일보기 포트 아래에서 제출 단추가 아래로 미끄러 져 보입니다. 입력 상자, 그리고 그것은 오히려 못생긴 보입니다.

입력/전송 버튼을 축소하여 적절하게 크기를 조정하여 서로 겹치지 않게하거나 또는 가능하지 않은 경우 제출 버튼 중심을 모바일 화면 크기에서만 정렬하려면 어떻게해야합니까?

<div class="col-md-8 col-md-offset-4">   
    <div class="input-group input-group-lg"> 
    <form class="navbar-form navbar-left" role="search" action="../includes/some.php"  method="POST" id="navbar"> 
     <div class="form-group"> 
     <input type="text" class="form-control" id="focusedInput" autocomplete="off" maxlength="17" placeholder="Enter number" name="number">    
     </div> 
    <button type="submit" class="btn btn-primary submit-btn" data-toggle="tooltip" data-placement="bottom" title="something">SUBMIT</button>    
    </form> 
    </div> 
</div> 

바이올린은 여기 - http://jsfiddle.net/uradA/3/

Answer 1

이

<div class="col-md-8 col-md-offset-4"> 
<div class="input-group input-group-lg"> 
    <form class="navbar-form navbar-left" role="search" action="../includes/some.php" method="POST" id="navbar"> 
     <div class="col-xs-12 col-sm-8 form-group"> 
      <input type="text" class="form-control" id="focusedInput" style="width:100%" autocomplete="off" maxlength="17" placeholder="Enter number" name="number"/> 
     </div> 
     <div class="col-xs-12 col-sm-4 form-group"> 
     <button type="submit" class="btn btn-primary btn-block submit-btn" data-toggle="tooltip" data-placement="bottom" title="something">SUBMIT</button> 
     </div> 
    </form> 
</div> 
</div> 

Answer 2

같은 것을 할 Button addons에서 가져온과 같이

<div class="col-lg-6"> 
    <div class="input-group"> 
    <input type="text" class="form-control big"> 
    <span class="input-group-btn"> 
     <button class="btn btn-primary big" type="button">Submit</button> 
    </span> 
    </div> 
</div> 

을 big은 여기서

여기

.big { 
    font-size: 30px; 
    height: 80px; 
} 

업데이트 된 예는 다음과 같습니다 jsfiddle.net/uradA