html – 如何在底部创建一个带有旋转木马缩略图的引导旋转木马,在右侧创建旋转木马标题

概述我正在使用Bootstrap 3x创建一个bootstrap轮播.我想为Big图像设置2个div(col-md-9),为显示相应的轮播标题设置另一个(col-md-3).我想在底部有缩略图(col-md-12). 目前,我能够显示缩略图的旋转木马,但当我尝试为旋转木马的标题添加div时,它不适合我想要的. 我的当前代码 <div class="container"> <div class ="r 我正在使用bootstrap 3x创建一个bootstrap轮播.我想为Big图像设置2个div(col-md-9),为显示相应的轮播标题设置另一个(col-md-3).我想在底部有缩略图(col-md-12).

目前,我能够显示缩略图的旋转木马,但当我尝试为旋转木马的标题添加div时,它不适合我想要的.

我的当前代码

<div > <div class ="row">    <!--Carousel--> <div >        <div ID="carousel"  data-rIDe="carousel">            <div >                <div >                    <img  src="img/construction.JPG">                </div><!-- /item -->                 <div >                    <img  src="img/scaffolding.JPG">                </div>                <div >                    <img  src="img/construction-iron.JPG">                </div>                <div >                    <img  src="img/BrIDge-Construction-Swale-BrIDge.JPG">                </div>                <div >                    <img  src="img/industrial-building-construction-scaffolding.JPG">                </div>                <div >                    <img  src="img/men-at-building-construction.JPG">                </div>                <div >                    <img  src="img/Construction-Workers.JPG">                </div>                <div >                    <img  src="img/building-construction.JPG">                </div>            </div>        </div>    </div> <!-- /col-sm-6 --></div><div class ="row">        <div >     <div >        <div ID="thumbcarousel"  data-interval="false">            <div >                <div >                    <div data-target="#carousel" data-slIDe-to="0" ><img src="img/construction.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="1" ><img src="img/scaffolding.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="2" ><img src="img/construction-iron.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="3" ><img src="img/BrIDge-Construction-Swale-BrIDge.JPG" wIDth="100" height="100"></div>                </div><!-- /item -->                <div >                    <div data-target="#carousel" data-slIDe-to="4" ><img src="img/industrial-building-construction-scaffolding.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="5" ><img src="img/men-at-building-construction.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="6" ><img src="img/Construction-Workers.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="7" ><img src="img/building-construction.JPG" wIDth="100" height="100"></div>                </div><!-- /item -->            </div><!-- /carousel-inner -->            <a  href="#thumbcarousel" role="button" data-slIDe="prev">                <span ></span>            </a>            <a  href="#thumbcarousel" role="button" data-slIDe="next">                <span ></span>            </a>        </div> <!-- /thumbcarousel -->    </div><!-- /clearfix -->    </div> <!-- /col-sm-6 --></div>      <!-- /.carousel --></div><!--/.container-->

尝试使用标题1
以下问题是标题的文本没有出现

<div > <div class ="row">    <!--Carousel--> <div >        <div ID="carousel"  data-rIDe="carousel">            <div >                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/construction.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">                    <div >                        <h1>Welcome to our site! 5a4UkoC9vURkjKVHTBAgi7</h1>                        <p>Take a look around and let us kNow if you have any questions.</p>                    </div><!-- carousal-caption -->                </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->                  </div><!-- /item -->                 <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/scaffolding.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                </div>                <div >                    <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/construction-iron.JPG">                    </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                  </div>                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/BrIDge-Construction-Swale-BrIDge.JPG">                 </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                </div>                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/industrial-building-construction-scaffolding.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                </div>                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/men-at-building-construction.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                </div>                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/Construction-Workers.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                </div>                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/building-construction.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                </div>            </div>        </div>    </div> <!-- /col-sm-6 --></div><div class ="row">        <div >     <div >        <div ID="thumbcarousel"  data-interval="false">            <div >                <div >                    <div data-target="#carousel" data-slIDe-to="0" ><img src="img/construction.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="1" ><img src="img/scaffolding.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="2" ><img src="img/construction-iron.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="3" ><img src="img/BrIDge-Construction-Swale-BrIDge.JPG" wIDth="100" height="100"></div>                </div><!-- /item -->                <div >                    <div data-target="#carousel" data-slIDe-to="4" ><img src="img/industrial-building-construction-scaffolding.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="5" ><img src="img/men-at-building-construction.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="6" ><img src="img/Construction-Workers.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="7" ><img src="img/building-construction.JPG" wIDth="100" height="100"></div>                </div><!-- /item -->            </div><!-- /carousel-inner -->            <a  href="#thumbcarousel" role="button" data-slIDe="prev">                <span ></span>            </a>            <a  href="#thumbcarousel" role="button" data-slIDe="next">                <span ></span>            </a>        </div> <!-- /thumbcarousel -->    </div><!-- /clearfix -->    </div> <!-- /col-sm-6 --></div>      <!-- /.carousel --></div><!--/.container-->

尝试使用标题2

下面的问题是标题的文字没有出现在大屏幕上,并且当浏览器较小时出现在大图像div上

<div > <div class ="row">    <!--Carousel--> <div >        <div ID="carousel"  data-rIDe="carousel">            <div >                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/construction.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">                    <div >                        <h1>Welcome to our site! 5a4UkoC9vURkjKVHTBAgi7</h1>                        <p>Take a look around and let us kNow if you have any questions.</p>                    </div><!-- carousal-caption -->                </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->                  </div><!-- /item -->                 <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/scaffolding.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">                    <div >                        <h1>Welcome to our site2!</h1>                        <p>Take a look around and let us kNow if you have any questions.</p>                    </div><!-- carousal-caption -->                </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->                  </div>                <div >                    <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/construction-iron.JPG">                    </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                      <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">                    <div >                        <h1>Welcome to our site!</h1>                        <p>Take a look around and let us kNow if you have any questions.</p>                    </div><!-- carousal-caption -->                </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->                  </div>                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/BrIDge-Construction-Swale-BrIDge.JPG">                 </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">                    <div >                        <h1>Welcome to our site!</h1>                        <p>Take a look around and let us kNow if you have any questions.</p>                    </div><!-- carousal-caption -->                </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->                    </div>                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/industrial-building-construction-scaffolding.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">                    <div >                        <h1>Welcome to our site!</h1>                        <p>Take a look around and let us kNow if you have any questions.</p>                    </div><!-- carousal-caption -->                </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->                     </div>                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/men-at-building-construction.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">                    <div >                        <h1>Welcome to our site!</h1>                        <p>Take a look around and let us kNow if you have any questions.</p>                    </div><!-- carousal-caption -->                </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->                  </div>                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/Construction-Workers.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">                    <div >                        <h1>Welcome to our site!</h1>                        <p>Take a look around and let us kNow if you have any questions.</p>                    </div><!-- carousal-caption -->                </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->                  </div>                <div >                <div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">                    <img  src="img/building-construction.JPG">                </div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->                <div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">                    <div >                        <h1>Welcome to our site!</h1>                        <p>Take a look around and let us kNow if you have any questions.</p>                    </div><!-- carousal-caption -->                </div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->                  </div>            </div>        </div>    </div> <!-- /col-sm-6 --></div><div class ="row">        <div >     <div >        <div ID="thumbcarousel"  data-interval="false">            <div >                <div >                    <div data-target="#carousel" data-slIDe-to="0" ><img src="img/construction.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="1" ><img src="img/scaffolding.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="2" ><img src="img/construction-iron.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="3" ><img src="img/BrIDge-Construction-Swale-BrIDge.JPG" wIDth="100" height="100"></div>                </div><!-- /item -->                <div >                    <div data-target="#carousel" data-slIDe-to="4" ><img src="img/industrial-building-construction-scaffolding.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="5" ><img src="img/men-at-building-construction.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="6" ><img src="img/Construction-Workers.JPG" wIDth="100" height="100"></div>                    <div data-target="#carousel" data-slIDe-to="7" ><img src="img/building-construction.JPG" wIDth="100" height="100"></div>                </div><!-- /item -->            </div><!-- /carousel-inner -->            <a  href="#thumbcarousel" role="button" data-slIDe="prev">                <span ></span>            </a>            <a  href="#thumbcarousel" role="button" data-slIDe="next">                <span ></span>            </a>        </div> <!-- /thumbcarousel -->    </div><!-- /clearfix -->    </div> <!-- /col-sm-6 --></div>      <!-- /.carousel --></div><!--/.container-->

解决方法 我从 the example给了你一个叉子.

HTML：

<div >        <div ID="main_area">                <!-- SlIDer -->                <div >                    <div  ID="slIDer">                        <!-- top part of the slIDer -->                        <div >                            <div  ID="carousel-bounding-Box">                                <div  ID="myCarousel">                                    <!-- Carousel items -->                                    <div >                                        <div  data-slIDe-number="0">                                        <img src="http://placehold.it/770x300&amp;text=one"></div>                                        <div  data-slIDe-number="1">                                        <img src="http://placehold.it/770x300&amp;text=two"></div>                                        <div  data-slIDe-number="2">                                        <img src="http://placehold.it/770x300&amp;text=three"></div>                                        <div  data-slIDe-number="3">                                        <img src="http://placehold.it/770x300&amp;text=four"></div>                                        <div  data-slIDe-number="4">                                        <img src="http://placehold.it/770x300&amp;text=five"></div>                                        <div  data-slIDe-number="5">                                        <img src="http://placehold.it/770x300&amp;text=six"></div>                                    </div><!-- Carousel nav -->                                    <a  href="#myCarousel" role="button" data-slIDe="prev">                                        <span ></span>                                                                           </a>                                    <a  href="#myCarousel" role="button" data-slIDe="next">                                        <span ></span>                                                                           </a>                                                                    </div>                            </div>                            <div  ID="carousel-text"></div>                            <div ID="slIDe-content" >                                <div ID="slIDe-content-0">                                    <h2>SlIDer One</h2>                                    <p>Lorem Ipsum Dolor</p>                                    <p >October 24 2012 - <a href="#">Read more</a></p>                                </div>                                <div ID="slIDe-content-1">                                    <h2>SlIDer Two</h2>                                    <p>Lorem Ipsum Dolor</p>                                    <p >October 24 2012 - <a href="#">Read more</a></p>                                </div>                                <div ID="slIDe-content-2">                                    <h2>SlIDer Three</h2>                                    <p>Lorem Ipsum Dolor</p>                                    <p >October 24 2012 - <a href="#">Read more</a></p>                                </div>                                <div ID="slIDe-content-3">                                    <h2>SlIDer Four</h2>                                    <p>Lorem Ipsum Dolor</p>                                    <p >October 24 2012 - <a href="#">Read more</a></p>                                </div>                                <div ID="slIDe-content-4">                                    <h2>SlIDer Five</h2>                                    <p>Lorem Ipsum Dolor</p>                                    <p >October 24 2012 - <a href="#">Read more</a></p>                                </div>                                <div ID="slIDe-content-5">                                    <h2>SlIDer Six</h2>                                    <p>Lorem Ipsum Dolor</p>                                    <p >October 24 2012 - <a href="#">Read more</a></p>                                </div>                            </div>                        </div>                    </div>                </div><!--/SlIDer-->                <div  ID="slIDer-thumbs">                        <!-- Bottom switcher of slIDer -->                        <ul >                            <li >                                <a  ID="carousel-selector-0"><img src="http://placehold.it/170x100&amp;text=one"></a>                            </li>                            <li >                                <a  ID="carousel-selector-1"><img src="http://placehold.it/170x100&amp;text=two"></a>                            </li>                            <li >                                <a  ID="carousel-selector-2"><img src="http://placehold.it/170x100&amp;text=three"></a>                            </li>                            <li >                                <a  ID="carousel-selector-3"><img src="http://placehold.it/170x100&amp;text=four"></a>                            </li>                            <li >                                <a  ID="carousel-selector-4"><img src="http://placehold.it/170x100&amp;text=five"></a>                            </li>                            <li >                                <a  ID="carousel-selector-5"><img src="http://placehold.it/170x100&amp;text=six"></a>                            </li>                        </ul>                                 </div>        </div></div>

CSS：

.hIDe-bullets {List-style:none;margin-left: -40px;margin-top:20px;}

Js：

jquery(document).ready(function($) {        $('#myCarousel').carousel({                interval: 5000        });        $('#carousel-text').HTML($('#slIDe-content-0').HTML());        //Handles the carousel thumbnails        $('[ID^=carousel-selector-]').click( function(){                var ID_selector = $(this).attr("ID");                var ID = ID_selector.substr(ID_selector.length -1);                var ID = parseInt(ID);                $('#myCarousel').carousel(ID);        });        // When the carousel slIDes,auto update the text        $('#myCarousel').on('slID.bs.carousel',function (e) {                 var ID = $('.item.active').data('slIDe-number');                $('#carousel-text').HTML($('#slIDe-content-'+ID).HTML());        });});

功能性Bootply：http://www.bootply.com/zaKtDsH6V4

总结

以上是内存溢出为你收集整理的html – 如何在底部创建一个带有旋转木马缩略图的引导旋转木马,在右侧创建旋转木马标题全部内容，希望文章能够帮你解决html – 如何在底部创建一个带有旋转木马缩略图的引导旋转木马,在右侧创建旋转木马标题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。