부스트랩 그리드 두 열 레이아웃을 작은 장치에 놓기

Question

부트 스트랩의 레이아웃으로 꾸짖습니다. 일반 데스크탑 환경에

내가 페이지를 모바일에 볼이 레이아웃

________col1________________col2_________ 
|firstname + input | Email + input | 
|lastname + input | Telephone + input| 
|etc    |     | 
----------------------------------------- 

을 가지고, 나는 FIRSTNAME에서 밀리 순간 이메일에 1 열에서 드롭 열이 싶습니다. 주문은 성, 이메일, 성, 전화 번호가됩니다.

여기 제가 지금까지 가지고있는 html입니다. 이 문제를 해결하는 것은 간단하지만 지금까지는 행운이 없습니다. 아래 코드에서 나의 행은 물론 문제가 있지만, 두 COL-XX-6 열을 포장은 어떻게 든

<div class="row"> 
    <div class="col-sm-2"> 
     <label class="control-label">Bedrijfsnaam</label> 
    </div> 
    <div class="col-sm-4"> 
     <span data-bind="text: name"></span> 
    </div> 
    <div class="col-sm-2"> 
     <label class="control-label">Straat</label> 
    </div> 
    <div class="col-sm-4" data-bind="with: address"> 
     <span data-bind="text: street"></span> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-2"> 
     <label class="control-label">E-mailadres</label> 
    </div> 
    <div class="col-sm-4"> 
     <span data-bind="text: email"></span> 
    </div> 
    <div class="col-sm-2"> 
     <label class="control-label">Nummer</label> 
    </div> 
    <div class="col-sm-4" data-bind="with: address"> 
     <span data-bind="text: number"></span> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-2"> 
     <label class="control-label">Website</label> 
    </div> 
    <div class="col-sm-4"> 
     <span data-bind="text: website"></span> 
    </div> 
    <div class="col-sm-2"> 
     <label class="control-label">Achtervoegsel</label> 
    </div> 
    <div class="col-sm-4" data-bind="with: address"> 
     <span data-bind="text: numberext"></span> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-2"> 
     <label class="control-label">KvK nummer</label> 
    </div> 
    <div class="col-sm-4"> 
     <span data-bind="text: coCnumber"></span> 
    </div> 
    <div class="col-sm-2"> 
     <label class="control-label">Postcode</label> 
    </div> 
    <div class="col-sm-4" data-bind="with: address"> 
     <span data-bind="text: postalcode"></span> 
    </div> 
</div> 

Answer 1

이 쉽게 부트 스트랩의 그리드 시스템으로 이루어집니다 작동하지 않습니다. 다음은 해상도가보다 750px (부트 스트랩이 선택한 중단 점을하게되면 위의 큰 디스플레이에서 서로 옆에 떠되지만 행으로 축소됩니다 두 개의 열을 생성한다 않습니다 당신

<div class="row"> 
    <div class="col-sm-6"> 
    <!-- column 1 stuff here --> 
    </div> 
    <div class="col-sm-6"> 
    <!-- column 2 stuff here --> 
    </div> 
</div> 

을 위해 작동합니다 col-sm-*합니다.

여기

부트 스트랩은 .container 클래스 내의 콘텐츠를 포장을 필요로한다는 것을 잊지 마십시오. 더 많은 정보 http://getbootstrap.com/css/#overview-container