2013-12-09 2 views
1

트위터 부트 스트랩을 시작하기 만하면됩니다. 지금까지 무언가를 발견 할 때까지 나는 일을 할 수 없다.Twitter Bootstrap - Spans가 작동하지 않습니다.

기본적으로 오른쪽의 콘텐츠 영역이있는 간단한 왼쪽 탐색 모음/열을 처리하려고합니다. 내가 찾은 모든 것에 따르면 나는 "행"div 안에 div 태그의 "span2"및 "span10"쌍으로 다음을 수행 할 수 있어야합니다.

그러나 내가 사용하는 너비는 항상 100 % 늘어났습니다. 그런 다음 다음 줄은 새 줄에서 아래로 갈 것입니다.

부트 스트랩 CSS가 작동 중입니다. 응답 성이 뛰어난 탐색 막대와 모든 종류의 것을 만들 수 있습니다. 이 스팬 상황만으로는 실패합니다.

누락 되었습니까? 가장 간단한 구현에서?

<link href="css/bootstrap.css" rel="stylesheet"> 

<html> 
    <body> 
    <div class="container"> 
     <div class="row"> 
     <div class="span2">Nav bar</div> 
     <div class="span10">Content</div> 
     </div> 
    </div> 
    </body> 
</html> 

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="bootstrap/dist/js/bootstrap.min.js"></script> 

레코드의 경우 ASP.Net 및 IE10에서 작성합니다.

감사합니다. 아니요.

당신의 묘사에서
+1

부트 스트랩 2 또는 twb3을 사용하고 있는지 확인할 수 있습니까? – pbenard

+0

그것은 부트 스트랩 3이었고 결국 대답을 찾았습니다. 고맙습니다. – Nay

답변

0

, 당신이 이런 식으로 뭔가 보일 것 부트 스트랩 2. 간단한 레이아웃을 사용한다고 가정 :

<div class="container"> 
    <div class="row"> 
     <div class="span2"> 
      <div class="well"> 
       <h1>Stuff</h1> 
      </div> 
     </div> 
     <div class="span10"> 
      <div class="well"> 
       <h1>stuff</h1> 
      </div> 
     </div> 
    </div> 
</div> 

컨테이너 센터 페이지를, 행은 열을 감싸는 (예 : 스팬) 및 well 클래스는 단지 자리 표시 자입니다. 위에 열거 된 것처럼 항상 열이 래퍼가되어야 함을 기억하면됩니다.

응답 성을 원하는 경우 bootstrap-responsive.css 파일을 추가 할 수 있습니다. 또한 응답 성이 기기에 적용되도록 <head><meta name="viewport" content="width=device-width, initial-scale=1.0">을 포함해야합니다.

희망을 얻었습니다. 이 그것이 작동 11

<html> 
    <body> 
    <div class="container"> 
     <div class="row"> 
     <div class="span2">Nav bar</div> 
     <div class="span9">Content</div> 
     </div> 
    </div> 
    </body> 
</html> 

사용자에 스팬의 최대 개수를 만드는

+0

답변 해 주셔서 감사합니다. 대답을 찾았습니다 ... 부트 스트랩 2.x 및 3.0에 대해 알고 있지 않은 많은 변경 사항이 있습니다.나는 내가 가서 코드를 바꿀 필요가 있다고 믿는다. span *이 (가) col-md- * 등이되었습니다. 그냥 포기하고 질문을 게시 한 후 문제가 발견됩니다./ – Nay

+0

오, 새로운 저시업 사용자 인 것 같습니다. 그것을 닫으려면 내 자신의 의견에 회신 : ( – Nay

0

보십시오. 나는 12의 전체 범위를 사용하는 경우

은 저도 같은 문제를 겪고 그러나 11

1

니스 질문 네이 작동;

부트 스트랩 3은 부트 스트랩 2와 다릅니다.

이 블로그는 좀 더 상세하게 http://www.helloerik.com/bootstrap-3-grid-introduction에서 이해하는 데 도움

<div class="container"> 
    <div class="row"> 
    <div class="col-md-2">Nav bar</div> 
    <div class="col-md-10">Content</div> 
    </div> 
</div> 

범위를에 COL-MD-* (또는 COL-XS)를 변경해보십시오.

희망이 도움이됩니다.

관련 문제