小编orn*_*mnt的帖子

我花了好几天时间试图解决这个问题而且我的智慧结束了.如果有人有任何见解,我将非常,非常感激.

我正在一个网站上工作并使用Bootstrap 3和Jquery Isotope.我使用Bootstrap 3的网格来排列四列div.一切都很好,直到我将同位素过滤器应用于div.在这之后,在Chrome中,它变为三列布局,右侧有巨大的间隙.似乎div保持相同的宽度 - 它们只是在三个而不是四个之后断开.令人抓狂的是,Safari中的一切似乎都运行良好!

以下是差异的说明.Safari(正确):

Chrome(不正确):

我已经尝试了所有的东西,我找到的唯一"解决方案"是将包含Isotope元素的.container div上的padding-left和padding-right更改为0.我不想这样做,但是,因为那时候其他含同位素的.container divs将无法正常排列.

我真的非常感谢你能给予的任何帮助!我真的无法想出这个...我已经创建了一个基本的Jsfiddle来说明:

http://jsfiddle.net/kECqL/5/

这是基本的html:

<div class="container">
    <div class="row iso">
        <div class="col-sm-3 iso-item" style="padding-bottom: 20px;">
            <div style="background-color: green;">
                <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
            </div>
        </div>
    </div>
</div>

这是Isotope脚本:

<script type="text/javascript">
var $container = $('.iso');

$container.imagesLoaded( function(){
  $container.isotope({
    // …

我想使用Bootstrap 3的Carousel插件输出当前的幻灯片编号.理想情况下,我希望将此文本作为旋转木马div下方的文本.例如:

[CAROUSEL HERE]
3 of 9

我可以使用CMS中的函数输出图像总数(例如上面示例中的9),但我无法弄清楚如何获取活动幻灯片(例如上面示例中的3).

我已经搜遍过,发现一个似乎就是这样做的线程:如何获取轮播的总数和当前幻灯片数

不幸的是,我认为上述线程中的解决方案在Bootstrap版本3中不起作用.或者我可能只是弄乱了一些东西.

有谁知道这是否可能？我真的希望它是!任何帮助或建议将不胜感激.谢谢!

如果在这里任何地方都有这个问题,请道歉.我尝试搜索,但只找到与轮播代码中的样式和定位标题相关的主题...

所以,我有一个包含三列的布局:

1. 左列包含与每个页面/项目相关的一般信息.
2. 中间列包含带图像的Bootstrap 3轮播.
3. 右栏是我计划在中心Carousel中显示与图像相关的所有标题的地方.

我无法弄清楚如何让标题在右列中运行.为了澄清,字幕将随每个轮播幻灯片而改变,就像它们在默认轮播设置中一样.我基本上想要从图像移动标题,并进入右列.

我使用Kirby(www.getkirby.com)作为我的CMS,我使用foreach循环来获取旋转木马中的图像等代码.这是我目前的代码,包括标题部分(我试图移动......)

<div id="center" class="col-xs-12 col-sm-6 col-md-8">
    <?php $imagepage = $page->children()->first() ?>
    <?php if($imagepage->hasImages()): ?> 
    <div id="merry-go-round" class="carousel slide">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <?php $n=0; foreach($imagepage->images() as $image): $n++; ?>               
            <div class="item<?php if($n==1) echo ' active' ?>">
                <img style="display:block; margin-left: auto; margin-right: auto;" src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive">
                <div class="carousel-caption"><?php echo $image->img_title() ?></div>
            </div>
    <?php endforeach ?>
    <?php endif ?>
        </div><!-- /carousel-inner -->
        <!-- Controls -->
        <a …

根据几个SO成员的建议,我决定尝试在网页上使用Jquery Isotope.我也在使用Bootstrap 3,并且无法获得缩略图库(具有不同大小的横向/纵向方向图像)看起来不错.

我正在使用Bootstrap 3 .thumbnail类来调整图像大小以适应响应列.一切都很好,直到我将Isotope应用于这些缩略图div.我真的不知道发生了什么事,但是我花了好几天时间来讨论一切(不要笑)而且无法弄明白,我正在失去理智等等.我希望这是非常简单的事情.我很想念,因为我在bootply.com上看到了一些似乎有用的例子(不知道我是否在Bootstrap 3中看到过它们.)

这就是发生的事情:

这是我一直在测试的页面的链接:http://www.chrissvensson.info/projects/025

这是我正在使用的代码的主要部分.

<div class="container iso">
<div class="row">
  <div class="item col-xs-12 col-sm-4 col-md-3">
    <a class="thumbnail fancybox" href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" rel="group"><img src="<?php echo $image->url() ?>" width="<?php echo $image->width(); ?>" height="<?php echo $image->height(); ?>"></a>
</div><!--thumbnail div-->
    <?php endforeach ?>
<?php endif ?>
</div><!--row-->

这是Isotope脚本:

$('.iso').isotope({
// options
itemSelector: '.item',
layoutMode: 'masonry'
});

我一直在测试这个jsfiddle中的东西:http://jsfiddle.net/52VtD/345/

这与Bootstrap 3 css相关联,并且我的定制CSS也在那里.出于某种原因,它似乎在小提琴中工作正常(除了它正在削减底部图像的事实),但它在我的网站上看起来完全不同.正如您将看到的,它就像它不计算div的垂直高度,只是裁剪它们并将它们堆叠在一起.

还有几点:

• 我很确定它与Bootstrap 3的.thumbnail类有关.当我从链接中删除该类时,事情似乎工作正常(除了图像不会扩展到列,我想要)
• 这是一个疯狂的部分:有几次我点击了另一个标签,或者在访问另一个窗口后回到我的网站,并且一切都在工作.我发誓我亲眼目睹了这一点,但我可能会产生幻觉.不确定这是否意味着它的工作非常,非常,非常慢或某些东西,但是？

如果您能提出任何建议,我将非常非常感激!非常感谢你提前.