文章/答案/技术大牛

发布

社区首页 >问答首页 >twitter引导转盘标题与照片宽度不匹配

问twitter引导转盘标题与照片宽度不匹配
EN

Stack Overflow用户

提问于 2012-12-07 13:25:37

回答 1查看 1.1K关注 0票数 0

我有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>

css

twitter-bootstrap

slider

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-12-07 14:34:10

我建议选择一个跨度大小，这将是您的照片宽度的最佳大小，因为跨度将决定旋转木马的宽度。较大的图像将缩小到跨度宽度。较小的图片，你可以通过将它们放在一个有实心(或透明)背景的较大的图片中来“放大”。

Carousel的设计是为了在它的跨度内显示图像--可以想象你可以动态地改变宽度，但我个人认为图像之间的变化在视觉上会有点不协调，而且还需要处理后退/下一步按钮的位置。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13757407

复制

相似问题

问twitter引导转盘标题与照片宽度不匹配
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问twitter引导转盘标题与照片宽度不匹配EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问twitter引导转盘标题与照片宽度不匹配
EN