입력 텍스트가있는 부트 스트랩 버튼 드롭 다운

Question

부트 스트랩이 처음입니다. 왼쪽에 배치 할 버튼 드롭 다운과 오른쪽에 입력 텍스트가 필요한 가로형을 만듭니다. 코드를 작성했지만 어떤 이유로 버튼 드롭 다운이 오른쪽으로오고 입력 텍스트가 왼쪽으로옵니다.

<div class="form-group"> 
    <div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    Categories <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 
<div class="col-sm-offset col-sm-10"> 
    <input type="text" class="form-control" placeholder="Enter Debate Name"> 
</div> 

그것이 내가 놓친 거지가?이란 코드는?

Answer 1

이유는 btn-group div에 내부에 열이 없기 때문입니다. 다음과 같이 변경하십시오 :

<form class="form-horizontal" role="form"> 
    <div class="col-sm-2"> <!--Wrap this button group in a col --> 
     <div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
       Categories <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </div> 
    </div> <!-- /col-sm-2 --> 
    <div class="col-sm-10"> <!--Offsets work like cols they require a value for how many cols to offset --> 
     <input type="text" class="form-control" placeholder="Enter Debate Name"> 
    </div> 
</form> 

'기본 제공'부트 스트랩을 사용하면 모든 col 값의 조합이 최대 12 개가되어야합니다. 모든 오프셋이 포함되어야합니다. 최대 값이 12보다 많으면 마지막 열이 바뀝니다. 12보다 작 으면 틈이 생깁니다. cols 왼쪽에 적용된 플로트 가지고 있기 때문에, 귀하의 경우에, col-sm-10 함께 div 왼쪽 및 부동 2 수 있도록 10 눈금 열에 떠있었습니다. 부유물을 없앨 것이 없으므로 btn-group div는 옆에 떠있었습니다.

또한 오프셋을 사용하려면 열과 같이 동작하고 특정 수의 그리드 열을 차지합니다. 즉, 다음과 같은 열 수를 알려 주어야합니다. .col-md-offset-* *을 숫자로 바꿉니다. 당신이 당신의 예에서 오프셋을 사용하고자하는 경우는 다음과 같이 뭔가 위를 변경할 수 있습니다 :

<div class="col-sm-9 col-sm-offset-1"> <!--2 grid cols for the button group + 9 + 1 for the input = 12 --> 
    <input type="text" class="form-control" placeholder="Enter Debate Name"> 
</div> 

마지막으로, 당신은 클래스의 -sm- 부분이 열이처럼 행동한다는 것을 의미 있음을 유의 767px 위의 모든 화면은 그 아래에 있으며 버튼은 입력 위에 위치합니다.