javascript - Bootstrap 3 Carousel 滑动时隐藏图片-6ren

javascript - Bootstrap 3 Carousel 滑动时隐藏图片

转载作者：行者123 更新时间：2023-11-27 23:34:53

我正在为一家公司开发网站。在网站的某个部分，我正在使用 Bootstrap Carousel 来展示一些元素，这是我的问题:

Bootstrap Carousel

当我单击使轮播滑动的按钮时，会发生这种情况，单击后，当第一张图像离开轮播时，我看到第一张图像与第三张图像交换。基本上我想要的是当用户点击导航按钮时轮播幻灯片只显示四个图像并隐藏离开的图像。

这是我的轮播 CSS:

    @media all and (transform-3d), (-webkit-transform-3d) {
    .carousel#solutions-carousel > .carousel-inner{
        margin: auto;
        overflow: hidden;
        width: 100%;
    }
    .carousel#solutions-carousel > .carousel-inner .item{
        -webkit-transition: -webkit-transform .6s ease-in-out;
        -o-transition: -o-transform .6s ease-in-out;
        transition: transform .6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        transition-timing-function:linear;
    }
    .carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.right{
        -webkit-transform: translate3d(25%, 0, 0);
        transform: translate3d(25%, 0, 0);
    }
    .carousel#solutions-carousel > .carousel-inner .item.prev, .carousel#solutions-carousel > .carousel-inner .item.active.left{
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0);
    }
    .carousel#solutions-carousel > .carousel-inner .item.prev.right,
    .carousel#solutions-carousel > .carousel-inner .item.next.left,
    .carousel#solutions-carousel > .carousel-inner .item.active{
        left: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);    
    }
}
.carousel#solutions-carousel > .carousel-inner .active,
.carousel#solutions-carousel > .carousel-inner .next,
.carousel#solutions-carousel > .carousel-inner .prev{
    display: block;
}
.carousel#solutions-carousel > .carousel-inner .active{
    left:0;
}
.carousel#solutions-carousel > .carousel-inner .next,
.carousel#solutions-carousel > .carousel-inner .prev{
    position: absolute;
    top: 0;
    width: 100%;
}
.carousel#solutions-carousel > .carousel-inner .next{
    left: 75%;
}
.carousel#solutions-carousel > .carousel-inner .prev{
    left: -75%;
}
.carousel#solutions-carousel > .carousel-inner .next.left,
.carousel#solutions-carousel > .carousel-inner .prev.right{
    left: 0;
}
.carousel#solutions-carousel > .carousel-inner .active.left {
left: -75%;
}

.carousel#solutions-carousel > .carousel-inner .active.right {
left: 75%;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info{
    padding-left: 0px;
    padding-right: 0px;
    width: 25%;
    display: inline-block;
    float:left;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info .image-wrapper{
    overflow: hidden;
    background-color: #000000;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info a:hover img{
    opacity: 0.6;
    transform: scale(1.1);
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info img{
    width: 100%;
    background-color: #000000;
    transition:transform .3s ease-in-out, opacity .3s ease-in-out;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info .solution-caption{
    margin-top: 2%;
    left:0%;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info a:hover h3{
    color:#8c8c8c;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption{
    position: relative;
    text-shadow: none;
    margin-top: 20px;
    left: 0;
    right: 0;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption > .caption-title h3{
    font-family: "Ubuntu Condensed";
    color:  #000000;
    font-size: 32px;
    font-weight: 400;
    text-align: center;
    color:; .3s ease-in-out;
    text-transform: uppercase;
    margin-top: 30px;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption .caption-body{
    margin-top: 24px;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption > .caption-body p{
    font-family: "Merriweather", sans-serif;
    color:  #5a5959;
    font-size: 16px;
    font-weight: 300;
    line-height: 26.444px;
    text-align: center;
    margin-left:6%;
    margin-right:6%;
}
.carousel#solutions-carousel .carousel-control#right-btn{
    margin-bottom: 12.7%;
    margin-right: 3%;
}
.carousel#solutions-carousel .carousel-control#left-btn{
    margin-bottom: 12.7%;
    margin-right: 5.6%;
}

下面是生成轮播的代码(这段代码没有问题):

if($solutions){
        $count = 0;
        $flag = false;
        $totalSolutions = count($solutions);
        $html .= "<div id='solutions-carousel' class='carousel slide' data-ride='carousel'>";
            $html .= "<div class='carousel-inner' role='listbox'>";
                foreach ($solutions as $s) {
                    if ($flag == false){
                        $html .= "<div class='item active'>";
                            $image = getImage("solucoes",$s['id'],'crop');
                            $html .= "<div class='solution-info'><a data-target='#solutions-carousel' data-slide-to='$count' href='{$s['ref']}'><div class='image-wrapper'>$image</div>";
                                    $html .= "<div class='carousel-caption'>";
                                        $html .= "<div class='caption-title'>";
                                            $html .= "<h3>".$s['title']."</h3>";
                                        $html .= "</div>";
                                        $html .= "<div class='caption-body'>";
                                            $html .= "<p>".$s['description']."</p>";
                                        $html .= "</div>";
                                    $html .= "</div>";
                            $html .= "</a>";
                            $html .= "</div>";
                        $html .= "</div>";
                            $flag = true;
                    }else{
                        $html .= "<div class='item'>";
                            $image = getImage("solucoes",$s['id'],'crop');
                            $html .= "<div class='solution-info'><a data-target='#solutions-carousel' data-slide-to='$count' href='{$s['ref']}'><div class='image-wrapper'>$image</div>";
                                    $html .= "<div class='carousel-caption'>";
                                        $html .= "<div class='caption-title'>";
                                            $html .= "<h3>".$s['title']."</h3>";
                                        $html .= "</div>";
                                        $html .= "<div class='caption-body'>";
                                            $html .= "<p>".$s['description']."</p>";
                                        $html .= "</div>";
                                    $html .= "</div>";
                            $html .= "</a>";
                            $html .= "</div>";
                        $html .= "</div>";
                    }
                    $count++;
                }
            $html .= "</div>";
            if($totalSolutions > 4){
                $html .= "<a class='right carousel-control' href='#solutions-carousel' role='button' data-slide='prev' id='left-btn'>";
                    $html .= "<img src='/img/carousel-lbtn.png'>";
                $html .= "</a>";
                $html .= "<a class='right carousel-control' href='#solutions-carousel' role='button' data-slide='next' id='right-btn'>";
                    $html .= "<img src='/img/carousel-rbtn.png'>";
                $html .= "</a>";
            }
        $html .= "</div>";
    }

这里是填充轮播的 javascripts:

$('.carousel#solutions-carousel .item').each(function () {
        console.log("aqui");
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        for (var i=0;i<2;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));
        }
    });

等待答案。最好的问候，

编辑:

找到了我的问题的解决方案，我在这个字段中缺少一个 css 指令:

.carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.right{
        -webkit-transform: translate3d(25%, 0, 0);
        transform: translate3d(25%, 0, 0);
    }


.carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.left{
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0);
    }

唯一缺少的是 left:0;在两条指令上。

希望对大家有帮助

最佳答案

// Carousel Auto-Cycle
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 6000
    })
  });

/* Global */
body {
    background: #3399cc;
    padding: 40px;
}  

img { max-width:100%; }

a {
	-webkit-transition: all 150ms ease;
	-moz-transition: all 150ms ease;
	-ms-transition: all 150ms ease;
	-o-transition: all 150ms ease;
	transition: all 150ms ease; 
	}
    a:hover {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
        filter: alpha(opacity=50); /* IE7 */
        opacity: 0.6;
        text-decoration: none;
    }


/* Container */
.container-fluid {
    background: #FFFFFF;
    margin: 40px auto 10px;
    padding: 20px 40px 0;
    max-width: 960px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}


/* Page Header */
.page-header {
    background: #f9f9f9;
    margin: -30px -40px 40px;
    padding: 20px 40px;
    border-top: 4px solid #ccc;
    color: #999;
    text-transform: uppercase;
    }
    .page-header h3 {
        line-height: 0.88rem;
        color: #000;
        }



/* Thumbnail Box */
.caption h4 {
    font-size: 1rem;
    color: #444;
    }
    .caption p {
        font-size: 0.75rem;
        color: #999;
        }
        .btn.btn-mini {
            font-size: 0.63rem;
            }


/* Carousel Control */
.control-box {
    text-align: right;
    width: 100%;
    }
    .carousel-control{
        background: #666;
        border: 0px;
        border-radius: 0px;
        display: inline-block;
        font-size: 34px;
        font-weight: 200;
        line-height: 18px;
        opacity: 0.5;
        padding: 4px 10px 0px;
        position: static;
        height: 30px;
        width: 15px;
        }


/* Footer */
.footer {
    margin: auto;
    width: 100%;
    max-width: 960px;
    display: block;
    font-size: 0.69rem;
    }
    .footer, .footer a {
        color: #c9e4f7;
        }
        p.right  { 
            float: right; 
            }


/* Mobile Only */
@media (max-width: 767px) {
    .page-header, .control-box {
    text-align: center;
    } 
}
@media (max-width: 479px) {
    .caption {
    word-break: break-all;
    }
}


/* ADD-ON
-------------------------------------------------- */
body:after{content:"less than 320px";font-size:1rem;font-weight:bold;position:fixed;bottom:0;width:100%;text-align:center;background-color:hsla(1,60%,40%,0.7);color:#fff;height:20px;padding-top:0;margin-left:0;left:0}@media only screen and (min-width:320px){body:after{content:"320 to 480px";background-color:hsla(90,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:480px){body:after{content:"480 to 768px";background-color:hsla(180,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:768px){body:after{content:"768 to 980px";background-color:hsla(270,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:980px){body:after{content:"980 to 1024px";background-color:hsla(300,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:1024px){body:after{content:"1024 and up";background-color:hsla(360,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}

::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }

a, a:focus, a:active, a:hover, object, embed { outline: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">

    <div class="page-header">
        <h3>Bootstrap</h3>
        <p>Responsive Moving Box Carousel Demo</p>
    </div>
        
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                    </ul>
              </div><!-- /Slide1 --> 
            <div class="item">
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                    </ul>
              </div><!-- /Slide2 --> 
            <div class="item">
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                				<p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                    </ul>
              </div><!-- /Slide3 --> 
        </div>
        
        <div class="control-box">                            
            <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
            <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
        </div><!-- /.control-box -->   
                              
    </div><!-- /#myCarousel -->
        
</div><!-- /.span12 -->          
</div><!-- /.row --> 
</div><!-- /.container -->

                            
<!-- Delete This -->                        
<div class="footer">
<a href="http://simonalex.com/">&hearts; Redfrost</a> | <a href="http://twitter.github.com/bootstrap/">Get Bootstrap</a> | <a href="http://placehold.it/">Get Placeholder</a>   
    <p class="right">&lsaquo; Resize Window &rsaquo;</p>
    <p>&nbsp;</p>
    <p><strong>*VISIT THIS LINK FOR IE9 FIX: <a href="http://codepen.io/redfrost/pen/yKAmc"  target="_blank">http://codepen.io/redfrost/pen/yKAmc</a>
        
        
<strong></p>    
</div>

关于javascript - Bootstrap 3 Carousel 滑动时隐藏图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34335613/

文章推荐： html - Bootstrap设计容器-不同颜色的流体

文章推荐： css - 当我改变它们的工作顺序时怎么办？

文章推荐： javascript - 如何使箭头键跳过禁用类的列表项？

carousel - 在 Slick Vertical Carousel 中，当第一个元素出现时，carousel 的布局会发生变化
我用 Slick 创建了一个垂直旋转木马。我对设计进行了一些更改，除了第一个元素在旋转木马的视野中之外，一切都按我想要的方式工作。一次有 4 个项目在我的轮播中可见，但是当第一个元素位于四个项目中的第
owl-carousel - Owl Carousel 页面加载时可见的所有项目
例如，此问题主要发生在用户使用速度较慢的互联网或移动设备时。但是，当轮播中的页面内容/图像没有被缓存时，有时也会在更高的速度上看到闪烁。如果页面加载并呈现第一个元素，所有轮播“幻灯片”就像一个列表一
owl-carousel - Owl Carousel 在隐藏容器中初始化时中断
当 Owl Carousel 在隐藏元素中启动，然后通过触发器显示该元素时，轮播项目的宽度完全错误(直到窗口调整大小): Fiddle (点击红色链接，看到损坏的布局出现，然后调整窗口大小) 这个问题
owl-carousel - Owl Carousel 中的克隆项目
在构建轮播时，我意识到猫头鹰添加了克隆的重复项。我的猫头鹰配置看起来像这样。我如何阻止这种情况发生。 owlDfe.owlCarousel({ loop: false,
html - Bootstrap Carousel - 控件仅适用于第一个 carousel
我正在为一家房地产公司开发一个网站，但我在使用 Bootstrap 的 Carousel 控件时遇到了问题。我的目标是在一行中包含三个不同的列，并且每列中有一个 Carousel。我让它工作，问题是
javascript - carousel-caption 向右移动并占据一半的 carousel
我需要让我的 bootstrap 3 carousel-caption 占据我的一半 carousel，让 caption background-color 有点透明，并在其中写入一些文本。所以逻辑
carousel - Bootstrap Media Slider Carousel 重复项目
我正在使用引导媒体 slider 轮播。但是，如果项目少于 4 个，它会重复项目。我想每次点击滑动一个项目。在下面查看我的代码查询 $(document).ready(function()
carousel - Bootstrap 4 Carousel slider 不起作用
关闭。这个问题需要 details or clarity 。它目前不接受答案。想改进这个问题？添加详细信息并通过 editing this post 澄清问题。 4年前关闭。社区在 29 天前审查
owl-carousel - 将点放在 Owl Carousel 上而不是下面
似乎默认情况下，Owl Carousel 将代表每张幻灯片的点放在旋转木马下方，而不是底部的内部。我发现我可以给它们添加负边距，它们会进入旋转木马，但它们落后于它有效地使它们变得无用。我想不出让它们出
javascript - 使 bootstrap carousel 子弹滑动另一个 carousel
基于本页 codrops 的代码:Codrops article ，我想将产品 slider 添加到 Bootstrap 轮播中。 I have added a codepen here 这是使瓶子动
html - react 引导 : Carousel carousel indicator
我使用 React Bootstrap 轮播。指示器按钮未正确对齐，尺寸也不对。有办法解决这个问题吗？ http://imgur.com/a/lhxMS
carousel - 元素用户界面 : Carousel - How to set current slide
我很难弄清楚如何使用轮播，更具体地说是如何设置当前幻灯片。这是文档 of the component 这是 fiddle Go First Go Second
css - Bootstrap 4 Carousel 列而不是 carousel-item
Bootstrap 是否支持在 Carousel 中显示网格列或行而不是 carousel-item -s？这个想法是有一个复杂的网格列结构，它们可以像轮播元素一样相互交换。例如，如果我们有以下网格:
carousel - 使用 angular-ui bootstrap carousel 更改分页器链接？
我正在使用 angular-ui bootstrap carousel 并想更改带有图像的左右导航链接。似乎在 tpl 中，它们被硬编码为 ‹ 和 › 有没有人对将这些更改为图像而不更改实际的 ang
javascript - React Slick 有没有办法在 Carousel 中设置 Carousel？
React Slick 有没有办法在 Carousel 中包含 Carousel？ import Slider from "react-slick";
owl-carousel - 使用 Owl Carousel 2 替换当前项目
如何用新的替换/重建 owl 轮播项目？描述在许多情况下，例如当您从数据库中获取新数据时，您会在轮播中添加新数据，但在本示例中，我尝试用新数据替换所有项目。 $('.owl-carousel')
owl-carousel - Owl Carousel 2 beta，跳转到特定幻灯片
我在我的网站中实现了 Owl Carousel 2，我希望能够使用像这样提供的 Jumbpto 帮助程序跳转到特定幻灯片， $('.btnJump').click(function(){ $(
carousel - 无法使用 Owl Carousel 2 向上/向下滚动页面
在轮播上开始拖动时，我无法在移动设备上滚动页面。因此，如果轮播占据了移动设备上的所有可见空间 - 向上/向下翻到页面会变得有点棘手...... 我如何禁用这种滚动的“拦截”？最佳答案将此 CSS
jquery - Twitter Bootstrap Carousel .carousel(number) 不起作用
我在使用 Twitter Bootstrap Carousel 插件上的 .carousel(number) 方法时遇到问题。不知何故我无法让它工作。轮播本身已启动并正在运行，.carousel('n
javascript - Bootstrap Carousel Error == TypeError : $(. ..).carousel 不是函数
我知道之前有人问过这个问题，但是相关的帖子在方法上有所不同，而且 fiddle 的例子也被删除了.. 我的情况:我在这里下载了整个 Bootstrap 表单: http://getbootstrap.

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Bootstrap 3 Carousel 滑动时隐藏图片