让旋转木马在页面中心?

时间:2017-07-05 20:03:53

标签: html css twitter-bootstrap bootstrap-4

<div id="imageCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">

                <ol class="carousel-indicators">
                  <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#imageCarousel" data-slide-to="1"></li>
                  <li data-target="#imageCarousel" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner">

                  <div class="item active">
                    <img src="pics/space_1.jpg" alt="Space 1">
                    <div class="carousel-caption">
                      <h3>Space 1</h3>
                      <p>Infinite Boredom</p>
                    </div>
                  </div>

                  <div class="item">
                    <img src="pics/space_2.jpg" alt="Space 2">
                    <div class="carousel-caption">
                      <h3>Space 2</h3>
                      <p>Infinite Boredom</p>
                    </div>
                  </div>

                  <div class="item">
                    <img src="pics/space_3.jpg" alt="Space 3">
                    <div class="carousel-caption">
                      <h3>Space 3</h3>
                      <p>Infinite Boredom</p>
                    </div>
                  </div>

                </div>

                <a href="#imageCarousel" class="carousel-control left" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                </a>

                <a href="#imageCarousel" class="carousel-control right" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                </a>

              </div>


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

我有一个工作正常的自举旋转木马。但是,当我将窗口设置为全屏时,它不会跨越页面的整个宽度。我会用什么造型来做到这一点?

1 个答案:

答案 0 :(得分:1)

确保遵循正确的嵌套约定。您的&#34; .container&#34;可能存在问题。或&#34; .container-fluid&#34;。

有关详情,请参阅:http://getbootstrap.com/css/#grid