【问题标题】:Bootstrap tile grid with expanding details具有扩展细节的引导平铺网格
【发布时间】:2015-06-03 23:40:42
【问题描述】:

我正在尝试在引导程序中创建一个磁贴网格,单击该网格时将展开磁贴下方标题的详细信息 - 无论视口大小如何。

这是我目前拥有的 - 在桌面视图中效果很好,连续 4 个标题框: http://www.bootply.com/WYywmfHzSZ

单击标题时,说明会显示在磁贴行下方。

但是,在平板电脑或移动设备上查看时,标题框会垂直堆叠,这会导致相应的描述出现在点击的标题下方的几个项目中。我想始终在单击的标题框下方显示描述。

这是一个直观的解释: http://tinypic.com/r/s285qo/8

有什么想法吗?

【问题讨论】:

    标签: twitter-bootstrap twitter-bootstrap-3 grid collapse expand


    【解决方案1】:

    这是sample of one possible solution。点击全屏预览,看看它在超小窗口宽度下的效果。

    我对此并不热衷,因为它需要为不同的屏幕尺寸复制描述,但我不确定如果不使用 javascript 重新编写 dom,你是如何解决这个问题的。

    该引导程序中的相关代码位是:

    <div class="row">
      <div class="col-xs-12 col-sm-4 col-md-3">
        <!-- changed the target to a class instead of id to allow for multiple targets -->
        <div class="title"><a data-toggle="collapse" href=".description-1">TITLE 1</a></div>
      </div>
      <!-- this one for extra small displays only -->
      <div class="col-xs-12 collapse description hidden-sm hidden-md hidden-lg description-1" id=""> DESCRIPTION 1. Lorem ipsum ...consequat. </div>
    

    下面的行...

    <div class="row">
      <!-- added hiddden-xs to hide this one on xtra small screeens -->
      <div class="col-xs-12 collapse description description-1 hidden-xs" id=""> DESCRIPTION 1. Lorem ipsum ...consequat. </div>
    

    HTH...欢迎堆栈溢出 :)

    【讨论】:

    • 谢谢,泰德 - 为您的建议和欢迎。我是一个长期的读者,但第一次海报。我考虑过这种方法(重复的细节部分),但我真的想尽量保持代码尽可能干净和轻量级。我一直在尝试用 Bootstrap 的原生 JS 来解决这个问题,但我想我可能需要编写一些自定义脚本来处理它。我发现这段代码完全符合我的要求,但需要引入很多额外的代码:tympanus.net/codrops/2013/03/19/…
    • 是的,这是一个很难解决的问题。如果您想出一个好的解决方案,请务必在此处发布。
    猜你喜欢
    • 2018-03-12
    • 2018-11-15
    • 1970-01-01
    • 1970-01-01
    • 2012-12-22
    • 1970-01-01
    • 2020-10-08
    • 2012-08-19
    • 2023-04-01
    相关资源
    最近更新 更多