페이지 맨 오른쪽에 내용이 표시됩니다.

Question

저는 Twitter Boostrap과 함께 제공되는 그리드 시스템을 사용하고 있습니다. #stories div의 경우 페이지 오른쪽으로 이동하여 '환영'div에 수직으로 정렬합니다.

Boostrap 참조 (스캐 폴딩 섹션)의 중첩 규칙을 따라 가이드에 따라 코드를 배치했지만 기사 div의 내용을 오른쪽에 열로 표시하지 않습니다.

누군가 내가 잘못하고있을 수도있는 것을 말해 줄 수 있습니까?

아래 코드와 하단의 전체 페이지 링크.

<div class="row"> 



     <!-- welcome container --> 
     <div class="span8" id="welcome"> 
      <h1>Storify</h1> 
      <div id="StoryActions"> 

      <div> 

       <a href="#" class="btn btn-success .btn-large" id="BtnCreateStory"> 
        <div id="NewStoryBtn"> 
         <span id="create">CREATE</span><p id="newstory">New Story</p> 
        </div> 
       </a> 



       <a href="#" class="btn" id="BtnJoin"> 
        <div id="JoinStoryBtn"> 
         <span id="create">JOIN</span><p id="newstory">Existing Story</p> 
        </div> 
       </a> 

       <p id="registration">no registration required</p> 



       <div id="StoryDescription"> 
       <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> 
       <p>Storify is a <strong>fun</strong>, group <strong>writing game</strong> 
       taking inspiration from the story writing game that you may have played at a party or at school with friends.</p> 

       <p>Each person writes a random sentence to form part of a story.</p> 

       <p>Once the story is complete, one person reads out the whole story, and usually everyone breaks into laughter.</p> 
       <p>Storify is great for playing with your Internet friends or Co-workers.</p> 
       </div> 

      </div> 

      </div> 

    <div class="row"> 

     <div class="span6"> 

       <!-- Running Stories --> 
       <div class="span3">&nbsp;</div> 

       <div class="span3"> 
        <div id="stories"> 
        I want to write a really long story here and see how far it goes down the path 
        </div> 
       </div> 

     </div> 


    </div> 

Answer 1

부트 스트랩 그리드 시스템마다 행에서 사용자가 최상위 레벨해야 동일한 12 이하, 행 내부 열의 합 설계 즉, 12 cloumns를 이용한다. 중첩 된 행의 열 합은 행이 중첩 된 열의 크기와 같아야합니다.

귀하의 예제의 단순화 된 방식은 다음과 같이이다 :

<div class="row"> 
    <!-- welcome container --> 
    <div class="span8" id="welcome"> 
    ... 
    <div class="row"> 
    <div class="span6"> 
    <!-- Running Stories --> 
     <div class="span3">&nbsp;</div> 

     <div class="span3"> 
     <div id="stories"> 
      I want to write a really long story here and see how far it goes down the path 
     </div> 
     </div> 
    </div> 
</div> 

몇 가지 실수가 있습니다.

1. span8 div가 제대로 닫히지 않았습니다. 태그를 닫는 대신 여분의 행 div가 있습니다.
2. 최상위 레벨의 열 합계가 14 (span8 + span6)가 지나치게 많습니다.
3. 두 개의 중첩 된 열 span3은 다른 행에서 닫히지 않습니다.

여기서 I 그래서 합이 12가 마찬가지로 I 중첩 열의 크기를 감소 같을 것이다 span4 바로 열을 감소 고정 된 버전이다.