Question

我使用带有Bootstrap 3.2的JQuery插件fullPage.js在Google Chrome上有一些问题。

例如：

我在fullPage演示页面中使用Bootstrap 3.2 img-responsive。 Bootstrap 3.2 img-responsive正在运行，但这是错误的。图像将遵循设备大小，它应自动更改大小。但事实并非如此。请参阅http://imgur.com/TC8GkAF 如果我只使用Bootstrap 3.2，那么它是正确的。

有谁告诉我如何解决这个问题？

<div class="section" id="section4">
     <div class="slide">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 bg-content">
                    <div class="col-xs-6">
                        <img src="http://wpb.url.com.tw/sites/41/41da4d25b638fccb871bf8a00bf76187/attachments/Image/Jiu-Ban-.png?1413947626156" class="img-responsive img-rounded" style="width:100%; height:auto;">
                    </div>                        
                    <div class="col-xs-6">
                       test 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

在css中使用百分比而不是像素和位置使用。

首先，您必须检查Bootstrap提供的功能，特别是网格系统和响应实用程序。

Bootstrap 3.2.0 - CSS

然后，为了执行良好的响应程序，宽度和高度应根据当前屏幕大小调整大小。

此外，您可以在StackOverflow上找到相关问题，例如：

Make Bootstrap Image responsive

Answer 2

这应该有效

有了这个，您可以在引导程序上设置样式并制作自己的整页滑块

<div class="container">
<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="carousel slide" id="carousel-858955">
            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target="#carousel-858955">
                </li>
                <li data-slide-to="1" data-target="#carousel-858955">
                </li>
                <li data-slide-to="2" data-target="#carousel-858955">
                </li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img alt="" src="http://lorempixel.com/1600/500/sports/1" />
                    <div class="carousel-caption">
                        <h4>
                            First Thumbnail label
                        </h4>
                        <p>
                            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <img alt="" src="http://lorempixel.com/1600/500/sports/2" />
                    <div class="carousel-caption">
                        <h4>
                            Second Thumbnail label
                        </h4>
                        <p>
                            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <img alt="" src="http://lorempixel.com/1600/500/sports/3" />
                    <div class="carousel-caption">
                        <h4>
                            Third Thumbnail label
                        </h4>
                        <p>
                            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </p>
                    </div>
                </div>
            </div> <a class="left carousel-control" href="#carousel-858955" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-858955" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
    </div>
</div>

Bootstrap 3 fullPage插件图像响应无法正常工作

2 个答案: