3 열 부트 스트랩 그리드 레이아웃 문제

텍스트 열, 긴 세로 그림 및 그림의 다른쪽에 다른 텍스트 열을 갖도록 웹 사이트의 섹션을 설정하려고합니다. 나는 원하는 모양을 얻을 수 있었지만 네거티브 상단 여백 (이 예에서는 표시되지 않음)을 사용해야 만 가능합니다. 3 열 부트 스트랩 그리드 레이아웃 문제

내가 시도 코드

새로운 행이 이전 행 아래에 새 블록을 생성하기 때문에 당신은 여분의 행을 필요가 없습니다 여기

http://www.bootply.com/3hKEyWGlJp

출처

2014-12-17 Chris

내가 문제를 볼 수 없습니다. 귀하의 예에서는 이미 "텍스트 열, 긴 세로 그림 및 다른 텍스트 열"을 가지고 있습니다. 가능한 경우 더 잘 설명하십시오. – nunoarruda

@ NunoArruda 아래로 스크롤하면 3 단계가 있고 4 단계도 포함하고 싶다는 것을 알 수 있습니다. 예를 들어 회색 div 아래에 나타납니다. – Chris

나는 그것을 본다. 3, 4 단계가 문제입니까? 그렇다면 3 단계와 4 단계를 어떻게 표시 하시겠습니까? – nunoarruda

-1

입니다. CSS 그리드가 작동하는 방식입니다 (예제에서는 부트 스트랩). step 1/2의 내용을 왼쪽 열에, div는 가운데 열에, 3/4 단계는 오른쪽 열에 넣으십시오.

<div class="row"> 
    <div class="col-md-3 col-md-offset-1"> 
     <p class="lead text-left">Step 1: asdf asdf asdf </p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at..</p> 

     <p class="lead">Step 2: Lorem ipsum dolor sit.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at</p> 
    </div> 

    <div class="col-md-3"> 
    <div class="phone"></div> 
    </div> 

    <div class="col-md-3"> 
    <p class="lead text-left">Step 3:Lorem ipsum dolor sit</p> 
    <p>Start typing your address &amp; we will give you a list of options to choose from.</p> 

    <p class="lead">Step 4: Lorem ipsum dolor sit</p> 
    <p>dsadsdad sddasd saddsd dasdsada sdasds d ds ads dadsd dasd sada sdasdsdd sads dadsdda sdsada sdasdsd</p> 
    </div> 
</div>

예 : http://www.bootply.com/rCr1B4wiKD

출처

2014-12-17 01:58:40 nunoarruda

3 열 부트 스트랩 그리드 레이아웃 문제

답변

관련 문제