html - Bootstrap : Slider on 2 spans ? - 一个跨度=图像,一个跨度=文本 block

标签 html css twitter-bootstrap slider

我的页面上有一些相似的部分,相同的设置 - 一个图标 Logo 和一个文本区域:

<div class="row-fluid">
 <div class="span7"> 
  <img src="img/icon2.png" alt="" />
 </div>
 <div class="span4">
  <h6>My Text Area</h6>
   <p>Description of that functionality<br>
   Multi lines of text<p>
 </div>
</div>

基本上只是一个图标和一个描述文本,开始时有 2 个,现在有 8 个,我想我想把它集中在一个片段中,然后在 8 个图标/描述之间滑动。

所以我的问题是,是否有任何机会或任何组件可以让我以 slider 效果的方式放入其中的 8 个?我看过的大多数 slider 都是图像 slider ,但由于我需要多语言,所以我不想将 2 个跨度转换为 1 个图像。

我不是网络开发方面的专家,所以如果可能的话,我将不胜感激。

最佳答案

您可以使用 bootstrap carousel为此。

这是他们期望的标记

<div class="carousel-inner">
    <div class="active item">[here]</div>
    <div class="item">[here]</div>
    <div class="item">[here]</div>
</div>

您需要做的就是将您的两个 spans 放入类为 item 的元素中。

检查这个fiddle .希望这就是您想要的。

关于html - Bootstrap : Slider on 2 spans ? - 一个跨度=图像,一个跨度=文本 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18228843/

相关文章:

Jquery - 使用 jquery 加载 html 菜单会破坏响应式下拉菜单

html - 高度为 100% 的内容推送容器

javascript - Bootstrap 模式不会在第一次点击时切换

html - Bootstrap 4 - 导航栏搜索栏中心

jquery - Bootstrap 2 : dropdown stay open

javascript - 当 'ESC' 键触发事件时,未在 keydown 事件上提交表单

html - 如何仅借助 HTML 和 CSS 创建图像 slider ?

javascript - 在 bootstrap 中,.pull-right 用于右对齐,.pull-left 用于左对齐,然后什么用于居中?

javascript - 创建不连续的滚动框并测量每个部分的时间

javascript - 基于 Toggle 的隐藏元素 - Ratchet