如何在twitter bootstrap中自定义响应列和输入字段? [英] How to customize responsive columns and inputs fields in twitter bootstrap?

查看:172
本文介绍了如何在twitter bootstrap中自定义响应列和输入字段?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

主要问题是如何自定义bootstrap响应css?我的代码部分工作,但我不能修复这种情况。很难解释,为了更好的理解我使可视化呈现在截图。



我将实际清除的模板代码发布在





真的要。


Main question is how to customize bootstrap responsive css? My code partly works but I can't fix this cases. It's hard to explain so for better understanding I made visualization presented on screenshots.

I posted actual cleaned template code on JSFIDDLE.

Now when width is more then 1200px columns are ok that mean they are two span6 side by side: Between 1200px and 980px display should looks like: Less then 979px and more then 768px on first navbar colapse I'd like to have something like that on container center: Until next shrinkage below 768px right column has jump to new line and stay there when reducing further to 480px and below. I think that view presented below is ok for mobile devices and better looks in narrow desktops browsers with the exception that when scale both columns are not on center:

The smallest width corresponds to my expectations.

解决方案

I am not sure if I understand your question correct, but you can customise the behavior by using media queries

// Landscape phones and down
@media (max-width: 480px) { ... }

// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }

// Large desktop
@media (min-width: 1200px) { ... }

Maybe you have to overwrite some classes and ids. The responsive information can be found on git:

responsive.less

Nevertheless play with these Settings only if you really have to.

这篇关于如何在twitter bootstrap中自定义响应列和输入字段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆