【问题标题】:twitter bootstrap carousel size推特引导轮播大小
【发布时间】:2013-01-29 19:35:21
【问题描述】:

我正在使用 Twitter Bootstrap 为我父亲创建一个网站,除了一件事:我不知道该怎么做:
- 减少轮播宽度
- 将旋转木马居中
- 使滚动箭头仍在图像上

here is the website so you can check the source

我已经逐行浏览了 css 并调整了轮播的各个方面,然后在我的浏览器中检查了它。

另一个令人困惑的地方是,如果我在浏览器中使用 SHIFT+CTRL+R 对其进行测试,其中一些调整会产生影响(因此 notepad++ 直接从我的桌面用 google chrome 打开它o 使用服务器或主机)并且看到了一些尴尬的变化,但是当我将它们放在服务器上时,这些变化都没有延续。

我看到其他一些帖子建议对 .carousel@image 进行调整,并且也尝试了那些没有成功的帖子。

【问题讨论】:

  • “使滚动箭头仍在图像上”是什么意思。
  • 您确实需要优化您在轮播中使用的图像 - 它们的文件太大而无法方便用户使用。

标签: image twitter-bootstrap size carousel


【解决方案1】:

您可以使用 CSS 设置轮播的宽度。使用margin: 0 auto 使块元素居中。只需更改.carousel 的CSS,其余的会自动正确设置样式。

<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
    ...
</div>

查看this jsfiddle 看看它是否有效。

【讨论】:

  • 对不起,我的意思是让滚动箭头保持在图像的左侧和右侧居中,而不是在网页的左右边缘。谢谢!您的解决方案完美运行!现在我只需要弄清楚我把旋转木马的哪一部分弄乱了才能让它再次滚动。
【解决方案2】:

只需在 ID 为“myCarousel”的 DIV 上添加一个“容器”类。

所以这个...

<div id="myCarousel" class="carousel slide">

变成……

<div id="myCarousel" class="carousel slide container">

【讨论】:

  • 谢谢你,比利,你说得对;将减小图像文件大小。
猜你喜欢
  • 1970-01-01
  • 2019-06-21
  • 2019-06-27
  • 1970-01-01
  • 2013-06-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-08-27
相关资源
最近更新 更多