推特引导轮播标题与照片宽度不匹配答案

【问题标题】：twitter bootstrap carousel caption not matching photo width推特引导轮播标题与照片宽度不匹配
【发布时间】：2012-12-07 05:25:36
【问题描述】：

我的 Twitter Bootstrap 轮播在大多数情况下运行良好，但我的照片具有不同的宽度，底部的标题与最宽的宽度相匹配，所以当我的照片宽度较小时，标题在之前的宽度和看起来有点不专业。我的代码如下，我想知道是否有任何方法可以解决这个问题，所以宽度总是与照片匹配。

<div class="row">
    <div class="span8 offset2">
            <div id="myCarousel" class="carousel slide">

                  <div class="carousel-inner">

                 <!-- here I loop through and add a bunch of photos -->
                  {% for photo in record_photos %}

                    <div class="active item">
                        <a href="/url"><img src="some-src"></a>
                        <div class="carousel-caption">
                            <h3 class="center-it">some caption</h3>
                        </div>
                    </div>

                   {% endfor %}

                  </div>

                  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

            </div>
        </div>
    </div>

【问题讨论】：

不要将不均匀宽度的图像放在轮播中。此外，这里发生的事情也不是 100% 清楚。 “保持黑色？”
我想我应该提到但他们是用户提交的照片，所以我无法控制他们提交的尺寸。
我会说，要么您重新格式化这些照片，要么轮播是该工作的错误工具。我有一些旋转木马的经验。当您扩展页面时，我的自动调整项目和累积的边距空间足以允许它不丢失位置。我可以写一个能忍受很多废话的平均轮播。但是不同的宽度......对于用户最终获得的体验来说，真的不值得麻烦。
@ErikReppen 你说得很好，你能提出任何可以达到类似目的的建议吗？让用户浏览各种照片，而不只是将它们全部呈现在页面上？

标签： javascript html css twitter-bootstrap slider

【解决方案1】：

我建议选择适合您的照片宽度的最佳跨度尺寸，因为跨度将决定轮播宽度。较大的图像将缩小到跨度宽度。您可以通过将较小的图像放置在具有纯色（或透明）背景的较大图像中来“放大”它们。

Carousel 旨在显示其所在范围内的图像 - 可以想象，您可以动态更改宽度，但我个人认为这些更改在图像之间会有些视觉上的不协调，并且会有后退/下一个按钮位置需要处理好吧。

顺便说一句，请注意，在上面的模板代码中，每个项目都是活动的。您需要将一些逻辑放入循环中，以便只有第一个循环迭代产生具有活动类的项目

【讨论】：

好的，感谢您的帮助。是的，我取出了很多 jinja2 只是为了不让没有这种经验的人感到困惑，但他们实际上并不活跃。