Question

我有以下问题：我想在桌面上并排显示三列，全屏显示。在移动设备上，我想在全屏显示下方三行。

这是桌面草图：

这是手机草图：

以下是我现在拥有的代码。它适用于桌面设备，但不适用于移动设备。

＆＃13;

#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{
    
}

＆＃13;

<!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>

＆＃13;

请帮忙。

非常感谢！

Answer 1

虽然概念是使用vh维度单位。我已在 CODEPEN

更新了我的代码

CSS：

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

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

正如它所说“在移动设备上，我希望在全屏显示的下方有三行。”以前我认为他希望每个部分都是全屏，但在再次阅读之后我做了我的修改但是归功于zimsystem享受：）

Answer 2

使用媒体查询，vh用于移动设备..

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

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

演示：http://www.codeply.com/go/AUD3fMsx6P

Answer 3

你的答案结合起来了。）

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

自举网格 - 移动和桌面安排

3 个答案: