html - 부트 스트랩에서.row의 목적은 무엇입니까?



css twitter-bootstrap (2)

.row 요소는 양면에 음의 여백을 갖습니다. 모든 열은 첫 번째와 마지막 것 (우리가 원하지 않는 것)조차도 간격을 처리하는 패딩을 가지므로 .row는이를 수정하기 위해 다시 당깁니다. 또한, 열 대신 컨테이너에 더 많은 행을 갖는 것이 더 합리적이라고 생각합니다.

https://src-bin.com

부트 스트랩의 설명서 에 따르면

행은 .container (고정 너비) 또는 .container-fluid (전체 너비) 내에 있어야합니다.

행을 사용하여 수평 열 그룹을 작성하십시오.

왜 이것이 필요한가?

.row.container 또는 .container-fluid 중 하나의 최대 너비 만 차지할 수 있습니다.

.row 를 닫아야한다는 점을 감안할 때 더 이상 쓸 수 없습니다.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1>Column A</h1>
        </div>
        <div class="col-md-6">
            <h1>Column B</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <h1>Column C</h1>
        </div>
        <div class="col-md-6">
            <h1>Column D</h1>
        </div>
    </div>
</div>

이것보다:

<div class="container">
    <div class="col-md-6">
        <h1>Column A</h1>
    </div>
    <div class="col-md-6">
        <h1>Column B</h1>
    </div>
 </div>

<div class="container">
    <div class="col-md-6">
        <h1>Column C</h1>
    </div>
    <div class="col-md-6">
        <h1>Column D</h1>
    </div>
</div>

Answer #1

컨테이너

컨테이너는 반응 너비에 대한 폭 제한을 제공합니다. 응답 크기가 변경되면 변경되는 컨테이너입니다. 행과 열은 모두 백분율 기준이므로 변경할 필요가 없습니다. 각면에 15 픽셀의 여백이 있고 행별로 취소됩니다.

행은 항상 컨테이너에 있어야합니다.

이 행은 열을 12 자리까지 추가하는 이상적인 장소를 제공합니다. 모든 열이 왼쪽으로 떠 있기 때문에 래퍼 역할도하며, 수레가 이상 해지면 추가 행에 겹치지 않습니다.

행의 양면에는 각각 15 픽셀의 마이너스 마진이 있습니다. 행을 구성하는 div는 일반적으로 컨테이너의 패딩 안쪽으로 제한되어 있지만 분홍색 영역의 가장자리를 만지지 만 넘어서는 안됩니다. 15px 음수 여백은 행을 컨테이너 15px 패딩 상단 위로 밀어내어 본질적으로이를 무효화합니다. 또한 행은 그 내부의 모든 div가 이전 행과 다음 행과 구분되어 자신의 행에 표시되도록합니다.

열에는 15px 패딩이 추가되었습니다. 이 패딩은 열이 행의 가장자리에 실제로 닿는 것을 의미하며, 행 자체가 음수 여백을 가지며 컨테이너에 양의 패딩이 있기 때문에 컨테이너 가장자리에 닿습니다. 그러나 열의 패딩은 열의 내부에있는 모든 요소를 ​​필요한 위치로 밀어 넣고 열 사이에 30px 간격을 제공합니다. 행 밖의 열을 사용하지 마십시오. 작동하지 않습니다.

자세한 내용은 이 기사 를 읽는 것이 좋습니다. 정말 분명하며 부트 스트랩의 그리드 시스템이 어떻게 작동하는지 잘 설명하십시오.





twitter-bootstrap-3