Question

我已经通过引导程序创建了这个滑块，但是当你调整浏览器大小时它的高度似乎有问题，它不会调整div的大小。如何设置div高度与宽度成正比？我怎样才能将它添加到wordpress页面。我试图添加引导程序文件，但似乎不起作用？

<div class="bs-example">
    <div id="myCarousel" class="carousel slide">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

        </ol>   
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item">
                    <p class="center lead league-name">Liga BBVA</p>
                    <div class="row center">
                        <div class="col-xs-4">
                            <img src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/151.png" alt="Barcelona">
                            <strong>Barcelona</strong>
                        </div>
                        <div class="col-xs-4">
                            <p class="score">3 - 1</p>
                            <p class="datetime">16 Feb 2014</p>
                        </div>
                        <div class="col-xs-4">
                            <img src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/131.png" alt="Granada">
                            <strong>Granada</strong>
                        </div>
                    </div>
                </div></div>
        </div>

    </div>
</div>


.item {
padding: 60px 20px;
color: #fff;
background: url('http://charlieintel.com/wp-content/uploads/2014/10/IMG_2372-620x400.jpg') no-repeat;
background-size: cover;
    font-size: 52px;
    text-align: center; 
}



.carousel{
    margin-top: 20px;
}
.carousel-control{
    top: 50%;
}
.bs-example{
    margin: 20px;
}
.carousel-control {
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;

    background: #222;
    border: 3px solid #fff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
 margin-top: -20px;   
}

.league-name {
margin-bottom: 0;
}

.center {
text-align: center;
}

.lead {
font-size: 21px;
}

.row {
}

.col-xs-4 {
float: left;
}

 img {
margin: 10px 0;
width: 64px;
height: 64px;
}

strong {
display: block;
font-size: 14px;
}

.score {
font-size: 26px;
line-height: 36px;
font-weight: bold;
margin-top: 20px;
}


.datetime {
    font-size: 14px;
}

Answer 1

问题是你在.item类上有一个固定的余量。里面的元素没有调整它的大小，这使滑块在宽度而不是高度上保持响应。

这是我现在发现的最佳解决方案。可能有更好的调整，但这个接缝工作正常。

请参阅小提琴：http://jsfiddle.net/Preben/exc8snpx/4/

编辑CSS：

添加：

.myCarousel {padding-top: 10%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;}

编辑：

.item {
    padding-left:5%;
    padding-right:5%;
    padding-top:8%;
    padding-bottom:8%;
    color: #fff;
}

将div高度设置为与背景宽度成比例

1 个答案: