부트 스트랩 : 세로 모양의 가로 필드

Question

부트 스트랩이있는 "세로 스타일"양식 안에 "가로 스타일"필드가 있어야합니다.

가능하면 어떻게 할 수 있습니까?

Answer 1

당신은 찾고있는 효과를 얻기 위해 부트 스트랩의 기존 클래스 (checkbox.inline)를 활용할 수 있습니다. 그것은 바로 보이게의 핵심은 라벨에 padding-left: 0px;를 지정하는 것입니다 :

이

<div class="control-group"> 
    <div class="controls"> 
     <label class="checkbox inline" style="padding-left: 0px;" for="inputColor">Favorite Color <input type="text" id="inputColor" class="span2" /></label> 
     <label class="checkbox inline" style="padding-left: 0px;" for="inputNColor">Next Color <input type="text" id="inputNColor" class="span2" /></label> 
    </div> 
    </div> 

작업, 예를 들어 http://jsfiddle.net/jhfrench/Hzucn/를 참조하십시오.

.controls-row label.inline { padding-left: 0px;} 줄에 따라 새로운 클래스를 만들려고 했으므로 요소에 스타일을 지정할 필요가 없지만 예상보다 많은 충돌이 발생했습니다. 따라서이 클래스를 사용하려면 솔루션은 pervasively, 당신은을 형상화에 시간을 투자 할 수 있습니다 ...

Answer 2

부트 스트랩에서 .form-horizontal 구현과 비슷한 형식을 사용할 수 있습니다. (가로 폼으로 스크롤하여 스크롤하십시오 : http://twitter.github.com/bootstrap/base-css.html#forms)

레이블과 양식 요소를 그룹화 div (즉, .control-group이 부트 스트랩의 가로형 레이아웃에서 수행하는 것)로 묶습니다.

플로트 레이블은 필드와 수평으로 정렬되도록 표시합니다.

label.horizontal { 
    float: left; 
    width: 160px; 
    padding-top: 5px; 
    margin-right: 20px; 
    text-align: right; 
} 

위의 예제에서 .horizontal 클래스의 레이블은 "가로형"이고 나머지는 "세로 형"또는 기본 폼 레이아웃입니다.

Answer 3

가 부트 스트랩에 사용할 준비 클래스가

확인이 예!

<div class="span6"> 
    <form> 
    <div class="controls controls-row"> 
     <input id="name" name="name" type="text" class="span3" placeholder="Name"> 
     <input id="email" name="email" type="email" class="span3" placeholder="Email address"> 
    </div> 

    <div class="controls"> 
    <textarea id="message" name="message" class="span6" placeholder="Your Message" rows="5"></textarea> 
    </div> 

    <div class="controls"> 
    <button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send</button> 
    </div> 

    </form> 
</div>