如何制作移动响应式专栏答案

【问题标题】：How to make a mobile responsive column如何制作移动响应式专栏
【发布时间】：2019-10-22 18:04:15
【问题描述】：

我的网站上有一个包含两栏的时间表。我希望它在桌面设备中为 2 列，在移动设备中为 1 列。

.text_demoBlock {
    padding-bottom:20px; 
    width:65%;
    text-align:justify;
    column-count: 2; 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-gap: 40px; 
    -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
    column-rule: 1px solid #000; 
    -moz-column-rule: 1px solid #000;
    -webkit-column-rule: 1px solid #000;
    }

  <div class="text_demoBlock">
    <p><b>Time</b></p>
    <p><b>08:55  Time</span>
<br>Time</b>
</p>
<p>09:00 Time</p>
<p>09:30  Time</p>
<p>10:00  Time</p>  
<p>       Time</p>
<p>11:00  Time</p>
<p>11:30  Time</p>
<p>12:00  Time</p>
<p>13:00  Lunch</p>
<p>14.00  Time</p>
<p>14.30  Time</p>
<p> 14.50  
3.  «Why We Love to Hate HR…and What HR Can   Do About It?»</p>
<p>16:00  Time</p>
<p>16:30  Time</p>
<p>17:00  Time</p>
<p>17:30  Time</p>
<p>18:00  Time</p>
<p>18:10  Time</p>
<p>18:15  It’s party time!</p>
  </div>

如何使其具有移动响应能力？

【问题讨论】：

尝试用 2 个 div 和宽度 50% 包装，向左浮动，移动宽度为 100%

标签： html css

【解决方案1】：

您需要做的就是添加媒体查询并指定所需的列数。

@media only screen and (max-width: 576px) {
  .text_demoBlock {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
}

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Responsive column</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <div class="row no-gutters m-2">
        <div class="col mr-2">
            <div class="row">
                <div class="col-xl-3"><label class="col-form-label">Select Time</label></div>
                <div class="col d-xl-flex justify-content-xl-center align-items-xl-center"><select style="width: 100%;"><option value="undefined" selected="">Time</option><option value="12">12:00</option><option value="13">1:00</option><option value="14">2:00</option></select></div>
            </div>
        </div>
        <div class="col mr-2">
            <div class="row">
                <div class="col-xl-3"><label class="col-form-label">Select Time</label></div>
                <div class="col d-xl-flex justify-content-xl-center align-items-xl-center"><select style="width: 100%;"><option value="undefined" selected="">Time</option><option value="12">12:00</option><option value="13">1:00</option><option value="14">2:00</option></select></div>
            </div>
        </div>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

【讨论】：

【解决方案3】：

对于移动尺寸，您需要 3 之间的距离现在您的代码可以更改为 shwon down：

    
//for Extra small phones
@media(max-width:375px){
  .text_demoBlock {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
 } 

//for normal phones
@media(min-width:376px) and (max-width:575px){

  .text_demoBlock {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
}

//for large mobiles 
@media(min-width:576px) and (max-width:567px) {
  .text_demoBlock {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
}

【讨论】：

【解决方案4】：

CSS @media 可用于在屏幕宽度的基础上隐藏元素。检查示例

Div show/hide media query

【讨论】：