以纵向方向自定义移动设备的引导程序列 [英] customizing bootstrap columns in portrait orientation for mobile devices

问题描述

任务:尝试制作移动网页: http://jsfiddle.net/anujbhai/hgaH7/3/(为了正常运行，还包括jQuery& Bootstrap文件).

Task: Trying to make a mobile webpage: http://jsfiddle.net/anujbhai/hgaH7/3/ (also include jQuery & Bootstrap files in order to run properly).

问题:页面应根据方向更改布局-在横向模式下

Problem: Page should change layout according to Orientation - in landscape mode

<div id="videoThumbs">...</div>

将在

<div id="billboard">...</div>

在纵向模式下，后者位于屏幕左侧，而前者现在仅显示一个缩略图，显示为侧边栏.

while in the portrait mode the latter goes to the left of the screen and the former now shows only one thumbnail, appearing like a sidebar.

仅使用媒体查询和Bootstrap很难做到这一点.我不知道要通过JavaScript应用适当的逻辑.请帮忙.

This is very hard to do with just mediaqueries and Bootstrap. I can't figure out a proper logic to be applied via JavaScript. Please help.

推荐答案

您可以尝试使用默认的Bootstrap响应实用程序类.

You can try using the default Bootstrap responsive utility classes.

看一下文档:

• http://getbootstrap.com/css/#sensitive-utilities-classes
• http://getbootstrap.com/css/#grid-options

• http://getbootstrap.com/css/#responsive-utilities-classes
• http://getbootstrap.com/css/#grid-options

小型和超小型设备类可用于纵向平板电脑视图，而小型和中型设备类可用于横向模式，您需要尝试各种组合.

Small and Extra small devices classes can work for portrait tablet view and Small and Medium devices classes can works for landscape mode, you need to try various combinations.

显然，这取决于平板电脑的屏幕尺寸，但这在7英寸和9英寸的平板电脑中效果很好.

Obviously, depends on the screen size of the tablet, but this works excellent in 7" and 9" tablets.

这篇关于以纵向方向自定义移动设备的引导程序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！