主要问题是如何自定义 bootstrap 响应式 css?我的代码部分有效,但我无法修复这种情况。这很难解释,所以为了更好地理解,我在屏幕截图上进行了可视化呈现。
我发布了实际清理过的模板代码JSFIDDLE http://jsfiddle.net/PyVc7/1/.
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:
最小的宽度符合我的期望。
我不确定我是否正确理解您的问题,但您可以使用媒体查询自定义行为
// 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) { ... }
也许你必须覆盖一些类和 id。响应信息可以在git上找到:
无响应 https://github.com/twitter/twitter/bootstrap/blob/master/less/responsive.less
响应式-1200px-min.less https://github.com/twitter/bootstrap/blob/master/less/responsive-1200px-min.less
响应式767px-max.less https://github.com/twitter/bootstrap/blob/master/less/responsive-767px-max.less
响应式768px-979px.less https://github.com/twitter/bootstrap/blob/master/less/responsive-768px-979px.less
响应式导航栏.less https://github.com/twitter/bootstrap/blob/master/less/responsive-navbar.less
响应式实用程序.less https://github.com/twitter/bootstrap/blob/master/less/responsive-utilities.less
不过,只有在确实需要时才使用这些设置。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)