Twitter 부트 스트랩 div invisible beyond 768px

트위터 부트 스트랩을 배우기 시작했고 매우 간단한 레이아웃을 만들었습니다.Twitter 부트 스트랩 div invisible beyond 768px

브라우저의 너비를 변경하면 브라우저의 너비가 768px 미만이되면 '행'의 두 div가 보이지 않게됩니다. 그렇지 않으면 div가 서로 위에 있습니다.

아무런 여백없이 가장 중요한 div를 보여주고 싶습니다.

여기에 plnkr입니다.

출처

2013-09-27 lostpacket

2'divs '에 어떤 내용을 넣으려고했는지 보셨습니까? –

도와 드리겠습니다 :) – Anobik

머리 부분에 추가하십시오. 금액 이상으로 브라우저의 너비를 변경하기 때문에 지금의이 사라지게 해달라고 div에 모두

<!DOCTYPE html> 
<html> 

    <head> 
    <style type=text/css> 
    .container{ 
    width:100% !important; 
    } 
    .row div{ 
     width:100%; 
     margin:0px !important; 
     padding:0px !important; 
     } 
    </style> 
    <link data-require="[email protected]*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" /> 
    <link data-require="[email protected]*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" /> 
    <link data-require="[email protected]*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" /> 
    <link data-require="[email protected]*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.css" /> 
    <script data-require="[email protected]*" data-semver="2.3.1" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="row"> 
     <div class="span 3 red" style="height : 100px"></div> 
     <div class="span 9 green" style="height : 100px"></div> 
     </div> 
    </div> 
    </body> 

</html>

의 스타일을 필요로하고 더 마진도 크기를 조정하지 않는 경우.

출처

2013-09-27 04:36:11 Anobik

div 클래스에는 스팬과 숫자 사이에 공백이 있습니다. 이 더 같이해야한다 :

<div class="container"> 
    <div class="row"> 
     <div class="span12 red" style="height : 100px"></div> 
     <div class="span12 green" style="height : 100px"></div> 
    </div> 
</div>

부트 스트랩은 컨테이너를 채울 12 열 그리드 span12에 구성되어 있지만, 여백이있을 것이다. 요소가 더 여유가 없을 때

<div class="row"> 
    <div class="red" style="height : 100px"></div> 
    <div class="green" style="height : 100px"></div> 
</div>

전형적인는 컨테이너있을 것입니다 : 당신이 범위 또는 컨테이너를 사용하지 않는, 아니 마진으로 화면을 가로 질러 모든 방법을 가고 싶은 경우

내용 : 당신은 그냥 당신이배울 것이 좋습니다 부트 스트랩을 배우고 시작하는 경우 여기

<div class=" red" style="height : 100px"> 
    <div class="container"> 
     <div class="row"> 
     <div class="span12 green" style="height : 100px"></div> 
     </div> 
    </div> 
    </div> 

    <div class="green" style="height : 100px"> 
    <div class="container"> 
     <div class="row"> 
     <div class="span12 red" style="height : 100px"></div> 
     </div> 
    </div> 
    </div>

는 또한 plnkr 예를

입니다 v2.3.1 대신. 가장 재전송 된 버전을 배울 수도 있습니다. 버전간에 변환되지 않는 차이점이 있기 때문입니다.

출처

2013-09-27 04:28:03 hcoat

Twitter 부트 스트랩 div invisible beyond 768px

답변

관련 문제