부트 스트랩 3.3.6 작은 화면에서 응답하는 양식

Question

Twitter Bootstrap 3.3.6을 사용 중입니다. 나는 그것에 익숙하지 않다. 다음 입력 필드가있는 양식을 디자인했습니다.

<div class="form-group row"> 
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label> 
    <div class="col-xs-10 col-md-4"> 
     <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" /> 
    </div> 
    <label for="address2" class="col-xs-2 col-md-1 control-label">Address 2:</label> 
    <div class="col-xs-10 col-md-4"> 
     <input type="text" name="address2" id="" class="form-control" maxlength="55" value="" /> 
    </div> 
    </div> 

나는 폭 이하 768 이상의 두 번째 레이블 "주소 2 :"파이어 폭스 반응 디자인 모드를 사용하여 위의 확인

는 새 라인에 싸여 있지만, 왼쪽에 약간의 여백을 보여줍니다. 나는 방화범을 사용하여 검사를 검사 할 때 아무런 문제가 보이지 않는다.

편집 : 사실 나는 큰 화면의 경우 동일한 줄에 2 개의 라벨과 입력을 넣으려고하지만 768px 미만의 화면에서는 2 줄로 나눌 수 있습니다.

Answer 1

다른 div에 입력 할 필요가 없습니다. 라벨 태그 다음에 입력을 넣고 두 개의 입력에 대해 두 개의 다른 .form-groups을 사용하십시오. 귀하의 코드는 이와 같아야합니다.

<div class="form-group"> 
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label> 
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" /> 
</div> 


<div class="form-group"> 
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label> 
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" /> 
</div> 

당신이하는 인라인 양식을 당신의 <form> 요소에 폼 인라인 클래스를 추가해야하는 경우.

<form class="form-inline"> 

최고 감사합니다.

Answer 2

col-xs-12 레이블을 추가했으며 작게는 더 나은 위치 지정을 위해 '텍스트 센터'클래스를 추가했습니다. 그러나 이는 사용자에게 달려 있습니다.

<div class="form-group row"> 
    <label for="address1" class="col-xs-12 col-md-1 control-label text-center">Address 1:</label> 
    <div class="col-xs-10 col-md-4"> 
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" /> 
    </div> 
    <label for="address2" class="col-xs-12 col-md-1 control-label text-center">Address 2:</label> 
    <div class="col-xs-10 col-md-4"> 
     <input type="text" name="address2" id="" class="form-control" maxlength="55" value="" /> 
    </div> 
</div>