부트 스트랩 : 드롭 다운 내가 양식을 만들려고하고 새로운 라인

Question

에 가지 않을 것이다, 그러나 어떤 이유로 내가 여러 드롭 다운 올바르게 다른 아래 하나를 표시 할 수 없습니다. 여기에 내 코드입니다 : 내가 잘못 뭘하는지 모르는

  <div class="form-group" style="display: block;"> 
      <label for="step1.1" class="control-label col-md-3 col-sm-3 col-xs-4">Label 1</label> 
      <div class="col-md-4 col-sm-4 col-xs-8"> 
       <select name="data[step1][1]" class="form-control col-md-7 col-xs-12" 
         id="step1.1"> 

        <option value="1">1</option> 
        <option value="x">X</option> 
       </select> 
      </div> 
     </div> 
     <div class="form-group" style="display: block;"> 
      <label for="step1.2" class="control-label col-md-3 col-sm-3 col-xs-4">Label 2</label> 
      <div class="col-md-4 col-sm-4 col-xs-8"> 
       <select name="data[step1][2]" class="form-control col-md-7 col-xs-12" 
         id="step1.2"> 

        <option value="2">2</option> 
        <option value="x">X</option> 
       </select> 
      </div> 
     </div> 

...

Answer 1

부트 스트랩을 사용하는 경우 그리드 시스템에는 12 개의 열이 있습니다. 따라서 드롭 다운을 다음 행, 즉 다른 행 아래에 올바르게 표시하려면 12 행을 모두 완료해야합니다.

코드에서 레이블에 3 열 (col-md-3)을 사용하고 선택 상자에 4 열 (col-md-4)을 사용합니다. 따라서 합계는 3 + 4 = 7이므로 남은 5 개의 열이 남습니다. ,

<div class="form-group" style="display: block;"> 
 
\t <label for="step1.1" class="control-label col-md-3 col-sm-3 col-xs-4">Label 1</label> 
 
\t <div class="col-md-9 col-sm-9 col-xs-8"> 
 
\t \t <select name="data[step1][1]" class="form-control col-md-7 col-xs-12" 
 
\t \t \t id="step1.1"> 
 
\t \t \t <option value="1">1</option> 
 
\t \t \t <option value="x">X</option> 
 
\t \t </select> 
 
\t </div> 
 
</div> 
 
<div class="form-group" style="display: block;"> 
 
\t <label for="step1.2" class="control-label col-md-3 col-sm-3 col-xs-4">Label 2</label> 
 
\t <div class="col-md-9 col-sm-9 col-xs-8"> 
 
\t \t <select name="data[step1][2]" class="form-control col-md-7 col-xs-12" 
 
\t \t \t id="step1.2"> 
 
\t \t \t <option value="2">2</option> 
 
\t \t \t <option value="x">X</option> 
 
\t \t </select> 
 
\t </div> 
 
</div>

Answer 2

여기 당신이 그것을 할 수있는 2 가지 방법 : 당신이 원하는 경우 http://pastebin.com/XivnbbHE

잘 모르겠어요 서로 인라인되어있는 요소들, 또는 다른 요소들 위에있는 요소들이다. 그래서 나는 둘 다 포함했다. 이를 달성하려면 부트 스트랩 클래스 inline 또는 form-inline을 사용할 수 있습니다. 첫 번째로 선택 항목이 매우 좁습니다. 당신은 그 CSS를 고칠 수 있습니다.

Answer 3

부트 스트랩 12 열 레이아웃을 사용 - : 대신 COL-MD-4를 사용 그래서, 여기에 올바른 코드를 간다 그리드를

를 완료하기 위해 COL-MD-9를 사용 부트 스트랩 그리드 참조 예 here

레이블에 col-md-3, 입력 용으로 col-md-4을 사용하고 있으므로 7 개의 그리드가됩니다. col-md-4 및 col-md-8 또는 12 그리드를 완료해야합니다. 같은 경우 sm 및 xs

시도 격자를 확인하려면 http://shoelace.io을 시도하십시오.