bootstrap-carousel中的中心图像

时间:2016-11-25 18:37:19

标签: html css twitter-bootstrap carousel center

如何在嵌入.col-md-5的bootstrap-carousel中居中更大的图像? 我写了一个例子here。我左边有一个旋转木马(.col-md-5),右边有一个内容(.col-md-7)。图像应该更大但不是(在更大的屏幕上)。

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="http://placehold.it/1920x1280" alt="img1">
                        <div class="carousel-caption">
                            <h3>Lorem ipsum</h3>
                            <p>Some text blabla</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="http://placehold.it/1920x1280" alt="img2">
                    </div>
                    <div class="item">
                        <img src="http://placehold.it/1920x1280" alt="img3">
                    </div>
                </div>
                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-md-7">
            <h1>ABOUT</h1>
            <h2>BLABLA</h2>
            <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eos porro ab</strong> Veritatis laborum cupiditate error accusantium laboriosam, iusto quas ducimus odit facilis delectus animi dolores illum iste ullam deserunt.</p>
        </div>
    </div>
</div>

在style.css中:

body {
    background-color: #2E4053;
    color: #E5E7E9;
    margin: 0;
    height: 100vh;
    width: 100vw;
}

.carousel, .item {
    height: 100vh;
}

.carousel-inner img {
   width: 100%;
   margin: auto;
}

0 个答案:

没有答案