적절한 사용

Question

첫 번째 문제 :

의 내가 container 1200 픽셀 폭의 폭을 파괴하려는 내 웹 사이트의 섹션이 있다고 가정 해 봅시다. 이 섹션에서는 브라우저 화면의 맨 왼쪽에 이미지를 배치하고 오른쪽에는 텍스트를 배치해야합니다.

나는 내가 container-fluid를 사용할 필요가 이것을 만들기 위해 내가 이런 식으로 사용하고 있다고 가정합니다

<div class="container-fluid"> 
<div class="row"> 
<div> HERE IS THE CONTENT FOR IMAGE AND TEXT </div> 
</div> 
</div> 

내가 브라우저에서이를 확인하는 경우 :

는 그것은 수평 스크롤 막대를 표시 그리고 스크롤 바를 없애기 위해 .row 클래스의 음수 여백을 제거해야합니다.

정상적인 방법입니까?

두 번째 문제 :

의는 내가 1200 픽셀의 기본 부트 스트랩 그리드 폭을 withing에로 전체 폭 배경 색상과 콘텐츠를 원하는 위치 섹션을 만들려고한다고 가정 해 봅시다.

이렇게하려면 container-fluid을 만들어야합니까? 아니면 그냥 여분의 div 추가 거기에 배경색을 추가하는 것이 낫다?

Answer 1

부트 스트랩에서 그리드는 컨테이너, 행 및 열의 세 가지 구성 요소로 정의됩니다. 컨테이너는 부트 스트랩에 정의 된 각 특정 중단 점에 대해 컨테이너의 최대 너비를 설정하고 컨테이너를 뷰포트 내에 센터링하는 두 가지 유형으로 제공됩니다. 뷰포트 디스플레이의 너비를 100 %로 설정하는 컨테이너 - 유체. 두 컨테이너 모두 패딩을 15px로 설정합니다.

행의 목적은 기본적으로 왼쪽으로 떠있는 열을 포함하기 때문에 자동으로 플로트가 지워집니다. 컨테이너에 의해 추가 된 패딩을 무효화하는 데는 -15 픽셀의 여백이 있습니다.

열이 행 내부로 이동합니다. 열은 12의 격자를 기반으로합니다. x 작은 중단 점 이상에서 하나의 열만 있으면 col-xs-12를 하나 추가하십시오. 해당 뷰포트 너비에 두 개의 동일한 열이 있어야하고 두 개의 col-xs-6을 추가하십시오. 기둥에는 좌우로 15px의 패딩이 있으므로 일관된 배설물이 있습니다.

컨테이너 너비를 부정하는 행 여백은 쓸모없는 것처럼 들릴 수 있지만, 다른 열 내에서 행과 열을 중첩 할 수 있으므로 그리드 분할의 끝없는 조합을 만들 수 있으므로 중요하고 매우 영리합니다.

그리하여 문제는 설계 방식대로 그리드를 사용하지 않는다는 것입니다. 컨테이너 안의 한 행에 하나 이상의 열이 있어야합니다.

Answer 2

다음과 같은 구조가 필요 부트 스트랩에서

:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xx-xx"> 
        ...content goes here... 
     </div> 
    </div> 
</div> 

이 구조의 이유는 컨테이너가 .container-fluid의 경우, 잡고 내용을 중심으로하려고하는 것입니다, 그것은 100 개 % 폭 열을 잡고를 사용 된 전통적인 ~ 960ish 픽셀 대신.

이 행을 사용하면 결정한 순서대로 12 열의 콘텐츠를 할당 할 수 있으며 다음 div가됩니다.

클래스 .col-xx-xx 당신이 큰 장치, 모바일/태블릿 기기에 대한 매체 장치 sm에 대한 md 및 xs 위해 해당 열의, lg의 한계점을 지정할 수 있습니다.

두 번째 이중 xx (.col-xx-xx)은 해당 컨테이너에서 가져올 12 개의 열의 수를 지정할 수있게합니다. 예를 들어, .col-lg-3은 큰 장치 (1200px 정도) 인 중단 점의 열이되며 3 열 공간이 필요합니다.

위의 구조를 사용해야합니다. 그렇지 않으면 스크롤 막대가 X 축에 표시됩니다.

두 번째 문제에 관해서는 편집

, 당신은 전체 너비가되고 싶어요, 당신은 코드에서 위의 주어진 구조를 사용하는 것이 정말 필요한가? 그 수단에는 마진과 패딩이, 내가 잠시 동안 지금 사용하고 그것에 대한 작은 트릭이 없다, 나는 아래에 설명하겠습니다 다음과 같이

이 jumbotron의 클래스와 용기를 사용

점보트론은 반응 형으로 설계되었으므로 반응 형 컨테이너로 작동합니다. 다음 클래스에서는 .my-own-jumbotron에 원하는 배경 이미지 나 색상을 지정하고 추가하는 내용에 따라 크기를 조정합니다. 즉 당신이 찾고있는 솔루션이지만, 여기 데모입니다 모르겠어요 : 세 번째 DIV 필요에 따라 확장 사용자 정의 배경 이미지와 대형 기기됩니다

https://www.hsoto.me/00295134567891srgsrgsrht36erdrbd5ye546/ipotra/

, 당신은 할 수 크기를 조정하고 모바일 장치에서 볼 수 있으며 응답 성이 뛰어나고 전체 너비입니다.

나는 이런 식으로 발견했다. .container-fluid div를 사용할 필요가 없다.