关于bootstrap轮播图片 carousel-control的问题

upupuup
  • 3
新手上路,请多包涵

1.bootstrap框架写轮播,当浏览器缩小到原来是的一半的时候 carousel-control却在carousel之外,再缩小浏览器的大小的时候又不会有这样的情况。

  1. <div class = "container">

            <div class = "row">
                <div class = "col-md-6 col-md-offset-3">
                    <section id = "homepage-feature" class = "carousel slide">
                        <!-- 轮播显示器 -->
                        <ol class = "carousel-indicators">
                            <li class = "active" data-target = "#homepage-feature" data-slide-to = "0"></li>
                            <li  data-target = "#homepage-feature" data-slide-to = "1"></li>
                            <li data-target = "#homepage-feature" data-slide-to = "2"></li>
                        </ol>
                        
                        <!-- 显示轮播图片 -->
                        <div class = "carousel-inner">
                            <!-- 第一个图片 -->
                            <div class = "item active">
                                <img src = "images/orange.png" />
                                <div class = "carousel-caption">orange</div>
                            </div>
                            <!-- 第二个图片 -->
                            <div class = "item">
                                <img src = "images/green.png" />
                                <div class = "carousel-caption">green</div>
                            </div>
                            <!-- 第三个图片 -->
                            <div class = "item">
                                <img src = "images/blue.png">
                                <div class = "carousel-caption">blue</div>
                            </div>
                        </div>
                        
                        <!-- 显示轮播控制器 -->
                        <a class = "left carousel-control" data-target = "#homepage-feature" data-slide = "prev">
                            <span class = "glyphicon glyphicon-chevron-left"></span>
                        </a>
                        
                        <a class = "right carousel-control" data-target = "#homepage-feature" data-slide = "next">
                            <span class = "glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </section>
                </div>
            </div>        
        </div>
    

3.
浏览器全屏显示轮播图片的时候
clipboard.png

浏览器宽度为全屏的一半的时候
clipboard.png

再把宽度缩小一半的时候
clipboard.png

4.所以我想问以下有什么方法可以解决carousel-control的问题(画红线的地方)。尝试了好久了,解决不了这个问题。求大神指导,谢谢。

回复
阅读 3.5k
1 个回答

里面的图片加了img-responsive类吗?可以试试。

宣传栏