부트 스트랩 그리드 - 모바일 및 데스크톱 배열

다음과 같은 문제가 있습니다 : 바탕 화면에 3 개의 열이 나란히 표시되고 전체 화면이 표시됩니다. 휴대 기기에서 전체 화면 아래에 3 개의 행이 표시됩니다. 다음 부트 스트랩 그리드 - 모바일 및 데스크톱 배열

모바일 스케치입니다 :

그리고 여기에 내가 지금 무슨 코드

여기 데스크탑 스케치입니다. 데스크톱에서는 작동하지만 모바일 장치에서는 작동하지 않습니다.

#eshop{ 
 
    background-color: red; 
 
} 
 

 
#truhlarna{ 
 
    background-color: blue; 
 
} 
 

 
#bahnak{ 
 
    background-color: yellow; 
 
} 
 

 
.col-md-4{ 
 
    overflow: auto; 
 
    padding-bottom: 100%; 
 
    margin-bottom: -100%; 
 
} 
 

 
.col-xs-12{ 
 
    
 
}

<!DOCTYPE html> 
 
<!-- 
 
To change this license header, choose License Headers in Project Properties. 
 
To change this template file, choose Tools | Templates 
 
and open the template in the editor. 
 
--> 
 
<html> 
 
    <head> 
 
     <title>Bakes Wood</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
 
     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     <link href="css/style.css" rel="stylesheet" type="text/css"/> 
 
     
 
     
 
    </head> 
 
    <body> 
 
     <div class="container-fluid kontejner"> 
 
      <div class="row"> 
 
       <div id="eshop" class="col-xs-12 col-sm-4 col-md-4">A</div> 
 
       <div id="truhlarna" class="col-xs-12 col-sm-4 col-md-4">B</div> 
 
       <div id="bahnak" class="col-xs-12 col-sm-4 col-md-4">C</div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

이 도와주세요.

대단히 감사합니다!

출처

2016-08-29 Eduard Bakeš

개념은 vh 차원 단위를 사용하는 것이지만. 이 말했듯이

.col-md-4 { 
    height: 100vh; 
} 

@media (max-width: 768px) { 
    .col-md-4 { 
    height: 33.33vh; 
    } 
}

: 나는 CODEPEN

CSS에서 내 코드를 업데이트 한 "모바일 장치에 나는이 표시 전체 화면 아래 세 행을 원한다." 이전에 나는 그가 각 부분이 전체 화면으로 원하는 가정, 그러나 다시 읽은 후 난 내 개정 그러나 zimsystem하는 신용 즐길 만든 :

출처

2016-08-29 15:47:41

이 방법은 부트 스트랩 기능을 무시하므로 좋은 접근 방법이라고 생각하지 않습니다. 그래서 이것은 .col-md-4가 사용 된 곳이라면 어디서나 전체 응용 프로그램에 영향을 미칠 것입니다. 그러나 대답은 어떻게 upvoted입니까? –

@kernallora이 스타일을 통해 자신의 문제를 해결할 수있는 사람에 대한 아이디어. 그는 한 섹션에만 한정된 맞춤 클래스를 만들 수 있습니다. 감사합니다 –

를 사용하여 미디어 쿼리 및 모바일 장치에 대한 vh을 ..

.col-md-4{ 
    overflow: auto; 
    height:100vh; 
}  

@media (max-width:768px) { 
     .col-md-4{ 
      height:33.33vh; 
     } 
    }

데모 : 당신의 대답의 http://www.codeply.com/go/AUD3fMsx6P

출처

2016-08-29 16:12:16 ZimSystem

-1

조합이 그것을 밖으로 일)

@media (max-width:768px) { 
 
    .col-md-4{ 
 
     overflow: auto; 
 
     height:33.33vh; 
 
    } 
 
} 
 

 
@media (min-width:769px) { 
 
    .col-md-4{ 
 
     overflow: auto; 
 
     height:100vh; 
 
    } 
 
}

,536.

출처

2016-08-29 16:24:22

@ Jyoti 대답은 패딩을 사용하므로 답변에 포함되지 않았습니다. 내 데모에 있었어. – ZimSystem

부트 스트랩 그리드 - 모바일 및 데스크톱 배열

답변

관련 문제