您的位置:首页 > Web前端 > BootStrap

bootstrap设计响应式按钮(浏览器变大和变小时按钮变化)

2017-11-16 17:59 471 查看
1.浏览器大窗口的时候



浏览器窗口变小的时候







源码:

HTML:

<div class="col-sm-4 text-right">
<button type="submit" class="btn btn-primary hidden-xs">Log In</button>
<button type="submit" class="btn btn-primary btn-block btn-lg visible-xs bk-margin-top-20">Log In</button>
</div>


CSS文件:

/*
log in 的btn
*/
.bk-margin-top-20 {
margin-top: 20px !important;
}
.btn-block {
display: block;
width: 100%;
}
.btn-lg {
border-radius: 3px;
padding: 12px 22px;
font-style: 17px;
line-height: 1.33;
}


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: