在浏览器调整大小时清除 "content" 的 div

Question

我有三个 div

 <div class="col-md-4">
    Some content #1
 </div>
 <div class="col-md-1></div>
 <div class="col-md-6">
    Some content #2
 </div>

col-md-4 包含一个 google 地图。
col-md-6 包含一个查询表。
col-md-1 是空白的。

css 对于 col-md-1 是

.col-md-1{
    background: #fff;   
    background: linear-gradient(180deg, transparent, #353535, transparent);
    background-position: 65%;
    background-repeat: repeat-y;
    background-size: 1px auto;
    padding-top: 400px;
    margin-top: 45px;
    margin-left: -17px;
    height: 100%;
}

这会在 col-md-4 和 col-md-6 之间创建一个分隔符。

分隔符必须在桌面浏览器中可见。但是在浏览器调整大小（低于 768px）时，分隔符应该消失，即不可见。

在桌面浏览器中，网站将以这种方式显示。

[          ] | [            ]
[          ] | [            ]
[google map] | [enquiry form]
[          ] | [            ]
[          ] | [            ]

在mobile/table浏览器中，网站应该是这样的。

[google map]

[enquiry form]

只是 google 地图和查询表之间的空白 space。

但我看到了这个：

[google map]
|
|
|
|
|
[enquiry form]

我该怎么做？

Answer 1

使用最新版本的Bootstrap，您可以添加d-none d-sm-block类给您col-md-1div。

Reference

<div class="col-md-4">
    Some content #1
 </div>
 <div class="col-md-1 d-none d-sm-block"></div>
 <div class="col-md-6">
    Some content #2
 </div>

Answer 2

这是在 Bootstrap 4（测试版 3）的当前版本中如何完成的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<style>
    .col-md-1{
        background: #fff;   
        background: linear-gradient(180deg, transparent, #353535, transparent);
        background-position: 65%;
        background-repeat: repeat-y;
        background-size: 1px auto;
        padding-top: 400px;
        margin-top: 45px;
        margin-left: -17px;
        height: 100%;
    }
</style>


<div class="container">
    <div class="row">
        <div class="col-md-4">
            google map
        </div>
        <div class="col-md-1 d-none d-md-block"></div>
        <div class="col-md-6">
            enquiry form
        </div>
    </div>
</div>

在浏览器调整大小时清除 "content" 的 div

clear "content" of a div on browser resizing

html

computer-science

twitter-bootstrap

bootstrap-4