响应式Bootstrap Carousel

Question

我有一个网页，我正在尝试使用bootstrap轮播。在第一张幻灯片上有3张图片，另一张幻灯片上嵌有一个youtube视频。该页面在较小的分辨率上看起来有问题。

以下是笔记本电脑上图片的外观： pictures on laptop

以下是youtube视频在笔记本电脑上的外观： video on laptop

以下是较小分辨率下图片的外观： pictures on 320x480

以下是较小分辨率的视频： video on 320x480

以下是360x640上的视频： video on 360x640

当它的重量较小时，有没有办法在中心的转盘显示器上制作图片？当然还有youtube视频。视频不在中央，超出了屏幕。

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">

        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">

                <div class="row item active">

                    <div class="bannerImage">
                        <a href="#"><img src="images/waspmote_pro_t.png" alt="">
                        </a>
                        <a href="#"><img src="images/waspmote_exp_radio_board_2-375_t.png" alt="">
                        </a>
                        <a href="#"><img src="images/u13_gw_t.png" alt="">
                        </a>
                    </div>

                    <div class="caption row">
                        <div class="col-md-12">
                            <h3>Waspmote</h3>

                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <ul style="list-style-type: none;">
                                    <li><i class="fa fa-share-alt"></i> Connect any sensor</li>
                                    <li><i class="fa fa-rss"></i> Using any wireless technology</li>
                                    <li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
                                </ul>

                            </div>
                            <div class="col-md-4">
                                <ul style="list-style-type: none;" class="waspmote">
                                    <li><i class="fa fa-check-circle"></i> Ultra low power (0.7uA)</li>
                                    <li><i class="fa fa-check-circle"></i> 100+ Sensors available</li>
                                    <li><i class="fa fa-check-circle"></i> Over the Air Programming (OTA)</li>
                                    <li><i class="fa fa-check-circle"></i> Encryption Libraries (AES, RSA)</li>
                                    <li><i class="fa fa-check-circle"></i> Encapsulated line available</li>

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <ul style="list-style-type: none;" class="waspmote">

                                    <li><i class="fa fa-check-circle"></i> Industrial Protocolos: RS-232,RS-485,Modbus,CAN Bus, 4-20mA</li>
                                    <li><i class="fa fa-check-circle"></i> 3G/GPRS/LoRaWAN/LoRa/Sigfox/868/900MHz,ZigBee/802.15.4/WiFi/RFID/ NFC/ Bluetooth 4.0</li>

                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /Slide1 -->

                <div class="row item">

                    <div class="bannerImage">
                        <a href="#"><img src="images/waspmoteps01.png" alt="">
                        </a>
                        <a href="#"><img src="images/waspmoteps02.png" alt="">
                        </a>
                        <a href="#"><img src="images/waspmote03.png" alt="" class="righter">
                        </a>
                    </div>

                    <div class="caption row">
                        <div class="col-md-12">
                            <h3>Waspmote Plug & Sense</h3>

                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <ul style="list-style-type: none;">
                                    <li><i class="fa fa-bolt"></i> Easy and fast deployment</li>
                                    <li><i class="fa fa-money"></i> Minimum maintenance costs</li>
                                    <li><i class="fa fa-exchange"></i> Services/network scalability</li>
                                    <li><i class="fa fa-cloud"></i> Any Cloud platform compatible</li>
                                </ul>

                            </div>
                            <div class="col-md-4">
                                <ul style="list-style-type: none;" class="waspmoteps">
                                    <li><i class="fa fa-check-circle"></i> Integrating more than 80 sensors</li>
                                    <li><i class="fa fa-check-circle"></i> Robust waterproof IP65 enclosure</li>
                                    <li><i class="fa fa-check-circle"></i> Add/change sensor probe in seconds</li>
                                    <li><i class="fa fa-check-circle"></i> Solar powered internal and external panel</li>

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <ul style="list-style-type: none;" class="waspmoteps">
                                    <li><i class="fa fa-check-circle"></i> Over the air programming (OTAP)</li>
                                    <li><i class="fa fa-check-circle"></i> Graphical/intuitive programming interface</li>
                                    <li class="space"><i class="fa fa-check-circle"></i> ZigBee, 802.15.4, 868, 900, LoRaWAN, LoRa, Sigfox, WiFi, 3G/GPRS and Bluetooth Low Energy</li>

                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /Slide2 -->
                <div class="row item">

                    <div class="bannerImage">
                        <iframe width="480" height="270" src="https://www.youtube.com/embed/f1wXYGDvYAY?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                    </div>

                    <div class="caption row">
                        <div class="col-md-12">
                            <h3>Waspmote Plug & Sense</h3>

                        </div>
                        <div class="row">
                            <div class="col-md-12 waspmoteps">
                                <p>The new Waspmote Plug & Sense! line allows developers to forget about electronics and focus on services and applications. Now you can deploy wireless sensor networks in a easy and scalable way ensuring minimum maintenance costs. The new platform consists of a robust waterproof enclosure with specific external sockets to connect the sensors, the solar panel, the antenna and even the USB cable in order to reprogram the node. It has been specially designed to be scalable, easy to deploy and maintain.</p>
                            </div>


                        </div>
                    </div>

                </div>
                <!-- /Slide3 -->
                <div class="row item">

                    <div class="bannerImage">
                        <iframe width="480" height="284" src="https://www.youtube.com/embed/GRMMS8nOdwc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                    </div>

                    <div class="caption row">
                        <div class="col-md-12">
                            <h3>Waspmote Events Sensor Board</h3>

                        </div>
                        <div class="row">
                            <div class="col-md-12 waspmoteps">
                                <p>More than 50 available sensors for the Waspmote platform. Values from the temperature, humidity, tilt, vibration, water, PIR, bend sensors integrated in the Events Sensor Board are sent using the 802.15.4/ZigBee radio.</p>
                            </div>


                        </div>
                    </div>

                </div>
                <!-- /Slide4 -->
            </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 -->

CSS

div {
    word-break: break-all;
}

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: #fbf4e0;
    margin: 40px auto 10px;
    padding: 20px 0px;
    max-width: 960px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}


/* Page Header */

.page-header {
    background: #fbf4e0;
    margin: -30px 0px 0px;
    padding: 20px 40px;
    border-top: 4px solid #ccc;
    color: #000;
    text-transform: uppercase;
}

    .page-header h3 {
        line-height: 0.88rem;
        color: #000;

    }


/* Thumbnail Box */

.caption {
    height: 140px;
    width: 100%;
    margin: 10px 0px;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .caption .span4,
    .caption .span8 {
        padding: 0px 20px;
    }

    .caption .span4 {
        border-right: 1px dotted #CCCCCC;
    }

    .caption h3 {
        color: #000;
        line-height: 2rem;
        margin: 0 0 20px;
        text-transform: uppercase;
        font-weight:bold;
    }

    .caption p {
        font-size: 1rem;
        line-height: 1rem;
        color: #000;
    }
    .caption ul{
         color: #000;
    }

.btn.btn-mini {
    background: #a83b3b;
    border-radius: 0 0 0 0;
    color: #fbf4e0;
    font-size: 0.63rem;
    text-shadow: none !important;
}

.carousel-control {
    top: 33%;
}


/* Footer */

.footer {
    margin: auto;
    width: 100%;
    max-width: 960px;
    display: block;
    font-size: 0.69rem;
}

    .footer,
    .footer a {
        color: #fff;
    }

p.right {
    float: right;
}


::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;
}

.bannerImage img {
    margin-left: 10%;

}
.bannerImage iframe{
    margin-left: 25%;
    margin-right: 25%;
}
.waspmote{
    font-size:13px;
}
.waspmoteps{
    font-size:13px;
}
.space{
    margin-bottom:34px;
}
.righter{

    margin-left:18% !important;
}

编辑1：媒体屏幕添加后发生的事情图片下的文字未显示在屏幕上。

media screen

编辑2：实际上这个标记适用于幻灯片中的图片，但图片下方的文字在较小的分辨率下仍然不可见。

<div class="bannerImage">
                                        <div class="row productsRow">
                                            <div class="col-md-4">
                                                <a href="#"><img src="images/waspmoteps01.png" alt=""></a>
                                            </div>
                                            <div class="col-md-4">
                                                <a href="#"><img src="images/waspmoteps02.png" alt=""></a>
                                            </div>
                                            <div class="col-md-4">
                                                <a href="#"><img src="images/waspmote03.png" alt="" class="righter"></a>
                                            </div>
                                        </div>
                                    </div>

CSS：

.productsRow {
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}

编辑3：JSFiddle补充道： JSFIDDLE

EdiT 4：删除高度后，视频不会居中。 enter link description here

EdiT 5：更改iframe CSS适用于小分辨率。但对于768x1024和800x1280纵向分辨率，图像下的文本超出了屏幕。

第1部分：768x1024_part1

第2部分：768x1024_part2

编辑6：PC /笔记本电脑分辨率中断。

sample

EdiT 7：Carousel在IE 11上自动在主页面上启动，但应该在活动页面上滑动！？有什么想法吗？

这是Jquery：

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

Answer 1

解决方案并不完美，但我希望它也可以帮到你。

对于您的容器.bannerImage，我定义了width:100%;，而不是您可以实现的 您网站的响应能力。

@media queries：如果屏幕分辨率低于1024px，则将图像大小设置为100％。

<强> CSS

.bannerImage img {
    width: 25%;
}
.bannerImage{
    padding-left: 15%;
    padding-right: 15%;
    width: 100%;
    height: auto;
}
.bannerImage iframe{
    width: 100%;
}
@media screen and (max-width: 1024px){
  .bannerImage img {
    width: 100%;
  }
}

<强> jsfiddle

编辑1

删除第1430行的height: 140px;，之后您的文字将以全高显示。

编辑2更新

所以iframe pic仍然存在问题，但这应该解决它：

<强> CSS

.bannerImage iframe, .video-container object, .video-container embed {
   position:absolute;
   top:0;
   left:0;
   width:80%;
   height:100%;
 }

.iframeImage{
   position:relative;
   padding-bottom:44.25%;
   height:0;
   left: -15%; //for centering the iframe
 }

<强> HTML

<div class="bannerImage iframeImage">
 ...
</div>

Answer 2

您是否尝试了img-responsive课程的图片和embed-responsive课程的视频内容？这些是响应式媒体内容的类

检查this是否有图片，this查看视频内容