在浏览器调整大小时清除div的“内容”

时间:2018-01-17 07:48:18

标签: html twitter-bootstrap bootstrap-4 computer-science

我有三个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包含一张谷歌地图 col-md-6包含查询表格 col-md-1是空白的。

col-md-1的css是

.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]
[          ] | [            ]
[          ] | [            ]

在移动/桌面浏览器中,网站应该是这样的。

[google map]

[enquiry form]

谷歌地图和查询表格之间的空白区域。

但我看到了这一点:

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

我该怎么做?

2 个答案:

答案 0 :(得分:0)

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

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>

答案 1 :(得分:0)

这是在当前版本的Bootstrap 4(beta 3)中完成的:

&#13;
&#13;
public override View GetView(int position, View convertView, ViewGroup parent)
    {
        DataViewHolder holder = null;
        if (convertView == null)
        {
            convertView = LayoutInflater.From(mContext).Inflate(Resource.Layout.FactAdapter, null, false);
            holder = new DataViewHolder();

            holder.txtid = convertView.FindViewById<TextView>(Resource.Id.idtxt);
            holder.txtName = convertView.FindViewById<TextView>(Resource.Id.Nametxt);
           holder.txtPhone = convertView.FindViewById<TextView>(Resource.Id.Phonetxt);
           holder.txtActive = convertView.FindViewById<TextView>(Resource.Id.Activetxt);

            convertView.Tag = holder;

        }
        else
        {

            holder = convertView.Tag as DataViewHolder;

        }

       holder.txtid.Text = Convert.ToString(mitems[position].id);
       holder.txtName.Text = mitems[position].Name;
       holder.txtPhone.Text = mitems[position].Phone;


        holder.txtActive.Text = Convert.ToString(mitems[position].Active);

        if (holder.txtActive.Text == "1")
        {
            holder.txtName.SetBackgroundColor(Color.LightGreen);
            holder.txtPhone.SetBackgroundColor(Color.LightGreen);
        }
        if (holder.txtActive.Text == "2")
        {
            holder.txtName.SetBackgroundColor(Color.Orange);
            holder.txtPhone.SetBackgroundColor(Color.Orange);
        }
        return convertView;

    }

    public class DataViewHolder : Java.Lang.Object
    {
        public TextView txtid { get; set; }
        public TextView txtName { get; set; }
        public TextView txtPhone { get; set; }
        public TextView txtActive { get; set; }


    }
&#13;
&#13;
&#13;