중첩 부트 스트랩 컨테이너 유체

Question

주 컨테이너에 다양한 필드 세트를 포함하는 HTML 페이지를 작성하고 있습니다. 모든 필드 세트는 다양한 입력 필드를 포함합니다. 나는이 방법으로하고 있어요 :

<form> 
    <div class="container-fluid"> 
    <fieldset> 
     <div class="container-fluid"> 
     <div class="row"> 
     ... 
     </div> 
     <div class="row"> 
     ... 
     </div> 
     </div> 
    </fieldset> 

    <fieldset> 
     <div class="container-fluid"> 
     <div class="row"> 
     ... 
     </div> 
     <div class="row"> 
     ... 
     </div> 
     </div> 
    </fieldset> 
    </div> 
</form> 

내가 둥지 컨테이너 유체 올바르지 않습니다 생각하지만 난 오른쪽 외부 및 내부 사업부 패딩을 얻기 위해이 시도. 또한 외부 div에서 컨테이너 유체 클래스를 제거하고 패딩을 설정하려고했습니다. 결과도 정확하지만 페이지가 여전히 반응하는지 확신 할 수 없습니다. 컨테이너 유체 클래스를 중첩하지 않도록하는 방법이 있습니까? 아니면 내 솔루션을 accettable입니까? 감사합니다 ...

Answer 1

1) 항상 다른 컨테이너 안에 부트 스트랩 컨테이너를 중첩하지 않도록해야합니다. 기술적으로 그것들을 중첩시킬 수는 있지만, 나는 그렇게하는 것이 좋은 생각이 드는 단일 사례를 생각할 수 없습니다. 따라서 항상 컨테이너 중첩을 피하십시오.

2) 부트 스트랩 그리드가 제대로 작동하게하려면 평상시의 모든 내용을 하나 이상의 열에 넣어야합니다. 열은 열 행 안에 있습니다. 그리고 행은 컨테이너 안에 있습니다.

컨테이너> 행> 열은 항상 유지 관리하려는 "거룩한 삼위 일체"입니다. 3 가지 구성 요소 중 하나를 놓치면 3 가지 구성 요소가 함께 작동하도록 설계되어 문제가 발생합니다.

코드에서 열을 사용하지 않아서 패딩이 누락되었습니다. 행 안에 열/열을 추가하면 부트 스트랩이 자동으로 "패딩"을 제공하여 모든 것이 100 % 반응합니다.

3) 용기 - 유체를 사용하기 전에 항상 두 번 (또는 세 번) 생각하십시오. container-fluid는 전체 화면 너비에 걸쳐 내용 범위를 만들 것이고 넓은 4K 모니터를 가진 사용자는 너를 싫어할 것이다.

<form> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <fieldset> 
 
       <div class="col"> 
 
        content goes here... 
 
       </div>     
 
      </fieldset> 
 
     </div> 
 
     <div class="row"> 
 
      <fieldset> 
 
       <div class="col"> 
 
        content goes here... 
 
       </div>     
 
      </fieldset> 
 
     </div> 
 
    </div> 
 
</form>

:

다음 코드는 꽤 잘 작동 예입니다