2012-07-25 3 views
2

트위터 부트 스트랩을 사용할 수있는 방식으로이 작업을 수행해야합니다.Twitter bootstrap : 중첩 된 필드 세트?

<fieldset> 
    <legend>Main Section</legend> 
    <div class="left-column"> 
     some stuff here 
    </div> 
    <div class="right->column"> 
     <fieldset> 
      <legend>A form inside</legend> 
      form here 
     </fieldset> 
    </div> 
</fieldset> 

부트 스트랩은 테두리가없는 평소와 다른 필드 세트의 스타일을 지정합니다. 테두리 및 일부 패딩을 추가하면 그리드와 함께 더 이상 제대로 작동하지 않습니다. 그 결과는 항상 나를 망쳤다. 필드 세트를 테두리가있는 모형과 같이 보이게하고, 테두리 안쪽의 레이블과 패딩을 필요로합니다.

이렇게 부트 스트랩을 사용하고 그 원칙을 따르면서 어떻게해야할까요?

Example

편집 : 더 나은하지만 어떤 이유로 솔루션처럼 해달라고 ...

 <fieldset class="row fieldset"> 
      <legend>Main Section</legend> 
      <div class="span6"> 
       some stuff here 
      </div> 
      <div class="span6"> 
       <fieldset class="fieldset"> 
        <legend>A form inside</legend> 
        form here 
       </fieldset> 
      </div> 
     </fieldset> 

.fieldset { 
    border: 1px solid #ccc; 
    padding: 10px; 
} 

.fieldset .span6 { 
    width: 560px; 
} 

답변

3
<div class='container'> 
    <fieldset class="fieldset"> 
    <legend>Main Section</legend> 
    <div class="row-fluid"> 
     <div class="span6"> 
     some stuff here 
     </div> 
     <div class="span6"> 
     <fieldset class="fieldset"> 
      <legend>A form inside</legend> 
      form here 
     </fieldset> 
     </div> 
    </fieldset> 
</div> 

.fieldset { 
    border: 1px solid #ccc; 
    padding: 10px; 
} 

http://jsfiddle.net/baptme/ppxGG/

+0

ARR은 ... 난 완전히 열 유체 잊었다! 감사! :) – burzum

+1

나는 이것이 1 년 된 것을 알지만, 참고로 크롬에서는 더 이상 작동하지 않습니다. – Nate