2014-06-05 4 views
0

두 열 레이아웃을 설정하려고합니다. 왼쪽 열은 항목 목록이고 두 번째 열은 첫 번째 열에있는 항목에 대한 세부 정보입니다 (항목을 클릭하십시오. 데이터는 렌더링되지만, 지금은 중요하지 않습니다.)부트 스트랩 3, 열 내에 나열

레이아웃을 설정하는 데 어려움이 있습니다. 열을 가져올 수 있지만 목록을 첫 번째 열에 추가하면 아래에 렌더링됩니다. 왜 그런지 모르겠습니다.

누군가 나를 올바른 방향으로 안내 할 수 있습니까?

<body> 
    <div id="content"> 
     <div class="row"> 
      <div id="sidebar" class="col-md-4"> 
       <div class="list-group"> 
        <a class="list-group-item">Item Here</a> 
        <a class="list-group-item">Item Here</a> 
       </div> 
      </div> 
      <div id="main" class="col-md-8"> 
       Other Stuff Here 
      </div> 
     </div> 
    </div> 
</body> 

I리스트 족 DIV의 ID/폭 부분을 상위 DIV (ID = "사이드")을 제거하고, 제조하려고했지만, 다음 이드 = "주요"목록 위에 렌더링한다.

그래서 혼란 스럽습니다. 내가 뭘 놓치고 있니? 당신은 COL-MD를 사용하는 경우 브라우저의 폭이 < 768px 아래에있을 때

+0

"목록에 어떻게 추가 하시겠습니까?" 여기 괜찮아 보이는군요 : http://www.bootply.com/covyy95Cyd – ZimSystem

+0

col-md를 사용한다면 div는 100 % 너비가 <768px보다 작으므로'col-xs'를'col-xs'로 바꾸십시오. 모든 장치 크기에 대한 결과 –

+0

@Skelly 부트 스트랩 응용 프로그램의 일부입니다. – Lisa

답변

0

, 당신의 DIV 100 % 폭을 가지고, 그것은 모바일 최초의 CSS 그리드에 대한 행동, 그래서 어떤 디바이스 크기에 대한 귀하의 결과를 위해 col-xs에 의해 col-md을 변경