Twitter引导程序-可以水平滚动的小部件/面板的列表 [英] Twitter bootstrap - list of widgets / panels that can scroll horizontally

问题描述

什么是理想的实现方式?

What would be the ideal way to implement:

1. 小部件/面板的列表.我正在寻找像这样的小部件 iGoogle或 heft.me .一个可能的解决方案是使用CSS 来自heft.me网站，但我想知道是否存在 twitter bootstrap的执行方式或是否有任何扩展 有空吗?

1. A list of widgets / panels . I am looking for widgets like in iGoogle or heft.me. A possible solution would be to use the css from the heft.me site, but I would like to know if there is a twitter bootstrap way of doing it or are there any extensions available ?

获得渲染小部件后，我将添加小部件 动态地.我希望这些小部件水平放置 可滚动.一种可能的解决方案是，我应该调整 twitter-bootstrap附带的旋转木马插件，但是我会再次 想知道是否有更好的方法吗?

Once I achieve rendering widgets, I will be adding widgets dynamically. I would like these widgets to be horizontally scrollable. One possible solution is that I should tweak the carousel plugin that comes with twitter-bootstrap, but again I would like to know if there is a better way ?

建议维护一个水平滚动列表 适用于较小的设备(例如手机)的小部件，或者 在移动设备上呈现不同的效果，可能是手风琴面板 或类似的东西?

Will it be advisable to maintain a list of horizontal scrolling widgets for smaller devices like mobile phones or is better to render them differently on mobile devices, may be accordion panels or something of that sort ?

顺便说一句，我正在使用twitter-bootstrap 2.0.4

BTW I am using twitter-bootstrap 2.0.4

推荐答案

基于此答案和此 jQuery插件

这是一个可行的解决方案: jsfiddle .

Here is a working solution : jsfiddle.

<div class="myClass">
    <div class="row">
        <div class="span5"></div>
        <div class="span5"></div>
        <div class="span5"></div>
    </div>
</div>

div.myClass {
    overflow-x: hidden;
    white-space: nowrap;
}
div.myClass [class*="span"] {
    display: inline-block;
    float: none;
}

$('.myClass').dragscrollable();

我不知道插件的功能，但是如果您想要自己的版本，则应该可以对其进行改造.

I don't know the plugin fiability, but you should be able to retro-engineer it if you want your own version of it.

这篇关于Twitter引导程序-可以水平滚动的小部件/面板的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！