부트 스트랩을 사용하여 여러 텍스트 및 버튼을 그룹화하는 방법은 무엇입니까?

Question

부트 스트랩을 사용하여 일부 버튼과 텍스트 필드를 그룹화하려하지만 매우 이상하게 보입니다. 인터넷에서 많은 자료를 확인했지만 도움이되지 않았습니다. 버튼 하나와 텍스트의 경우 완벽하게 작동합니다.

은 다음과 같이보고 선호하는 것 :

그러나 그들은 다음과 같이 :

이 버튼은 항상 드롭 다운 해봤 뭐든간에. 부트 스트랩을 사용하여이를 수행 할 수 있는지 궁금합니다. 사전에

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="input-group btn-block"> 
 
\t \t <span class="input-group-btn"> 
 
\t \t \t <input type="button" value="-10" class="form-control"> 
 
\t \t \t <input type="button" value="-1" class="form-control"> 
 
\t \t </span> 
 
\t \t <input type="text" value="10" class="form-control"> 
 
\t \t <span class="input-group-btn"> 
 
\t \t \t <input type="button" value="+1" class="form-control"> 
 
\t \t \t <input type="button" value="+10" class="form-control"> 
 
\t \t \t <button type="submit" class="btn btn-primary"><i class="fa fa-refresh"></i></button> 
 
\t \t \t <button type="button" class="btn btn-danger"><i class="fa fa-times-circle"></i></button> 
 
\t \t </span> 
 
\t </div>

많은 감사합니다!

Answer 1

다음은 작동 방법입니다 ... 스팬을 제거하고 50px 너비의 스타일을 추가했습니다. 그러나 너는 스팬을 유지할 수 있었고, 난잡한 부분을 제거하기 위해 제거했습니다 ... 너비를 조정하십시오. 좋아하는대로.

<div class="input-group btn-block"> 
     <input type="button" value="-10" class="form-control" style="width: 50px;"> 
     <input type="button" value="-1" class="form-control" style="width: 50px;"> 
     <input type="text" value="10" class="form-control" style="width: 50px;"> 
     <input type="button" value="+1" class="form-control" style="width: 50px;"> 
     <input type="button" value="+10" class="form-control" style="width: 50px;"> 
     <button type="submit" class="btn btn-primary" style="width: 50px;"><i class="fa fa-refresh"></i></button> 
     <button type="button" class="btn btn-danger" style="width: 50px;"><i class="fa fa-times-circle"></i></button> 
</div> 

Answer 2

안녕하세요 Input-group

<div class="row"> 
<div class="col-xs-6"> 
<div class="input-group"> 
<button type="button" class="btn btn-primary">-10</button> 
<button type="button" class="btn btn-primary">-1</button> 
<input type="text" class="form-control"/> 
<button type="button" class="btn btn-primary">-10</button> 
<button type="button" class="btn btn-primary">-1</button> 
<button type="submit" class="btn btn-primary"><i class="fa fa-refresh"></i> 
</button> 
<button type="button" class="btn btn-danger"><i class="fa fa-times-circle"> 
</i></button> 
</div> 
</div> 
</div> 

참조

Fiddle Demo

바이올린

아래 아래 코드를 사용하십시오