Question

我想帮助我的幻灯片＆gt;＆gt;＆gt;

我的问题是：我想在幻灯片上放置一个面板，但是当我试图给那个面板（ - 边距）时，幻灯片显示向右移动并在页面中滚动!!

那不是我的代码

        <div class="room-booking">
        <div class="container">
            <div class="col-lg-2">
                <div class="room-booking">
                    <p style="color:#f8c45a; padding:20px 30px; margin:0px;">1/4</p>
                </div> <!-- End room-booking -->
            </div> <!-- End col-lg-4 -->
        </div>  <!-- End Container -->
    </div>
  <!-- Carousel -->  
    <div data-ride="carousel" class="carousel slide" id="carousel-example-generic" style="z-index:0">
        <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel-example-generic" class="custom-indicators" ></li>
            <li data-slide-to="1" data-target="#carousel-example-generic" class="custom-indicators"></li>
            <li data-slide-to="2" data-target="#carousel-example-generic" class="custom-indicators active"></li>
            <li data-slide-to="3" data-target="#carousel-example-generic" class="custom-indicators"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item">
                <img class="img-responsive" alt="First slide" data-src="holder.js/900x500/auto/#777:#555/text:First slide" src="img/pic1.png" style="margin-left:auto; margin-right:auto; width:100%; height:636px;">
            </div>
            <div class="item">
                <img class="img-responsive" alt="Second slide" data-src="holder.js/900x500/auto/#666:#444/text:Second slide" src="img/pic1.png" style="margin-left:auto; margin-right:auto; width:100%; height:636px;">
            </div>
            <div class="item active">
                <img class="img-responsive" alt="Third slide" data-src="holder.js/900x500/auto/#555:#333/text:Third slide" src="img/pic1.png" style="margin-left:auto; margin-right:auto; width:100%; height:636px;">
            </div>
            <div class="item">
                <img class="img-responsive" class="img-responsive" alt="Forth slide" data-src="holder.js/900x500/auto/#666:#444/text:Forth slide" src="img/pic1.png" style="margin-left:auto; margin-right:auto; width:100%; height:636px;">
            </div>
        </div>
        <a data-slide="prev" href="#carousel-example-generic" class="left-arrow">
            <div class="halfCircleLeft"><span style="padding:15px 0px 0px 5px;" class="glyphicon glyphicon-chevron-left"></span></div>
        </a>
        <a data-slide="next" href="#carousel-example-generic" class="right-arrow">
            <div class="halfCircleRight"><span style="padding:15px 0px 0px 0px;" class="glyphicon glyphicon-chevron-right"></span></div>
        </a>
    </div>
  <!-- END Carousel -->

像这样的＆gt;＆gt; http://postimg.org/image/k7c5hl7yx/

Answer 1

您要添加的内容称为标题。在要添加到的每张幻灯片上尝试以下操作：

<div class="item active">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

幻灯片放映面板上的Bootstrap

1 个答案: