Question

我无法让我的旋转木马全屏显示。

当我向fixed类添加.fullscrn位置时，轮播看起来不错，但是一旦屏幕缩小，轮播就会失去响应能力。

当我不包括固定位置时，页面最终会有大约300像素的滚动

bootply以下代码。

我反对this帖子。

<div class="row no-pad">
    <div id="bg-slide-carousel" class="carousel slide carousel-slide col-md-12 no-pad fullscrn "
         data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner fullscrn">
            <div class="item active fullscrn">
                <div class="slide1 slides"><img src="" class="fullscrn"></div>
            </div>
            <div class="item fullscrn">
                <div class="slide2 slides"><img src="" class="fullscrn" alt=""/></div>
            </div>
            <div class="item fullscrn">
                <div class="slide3 slides"><img src="" class="fullscrn" alt=""/></div>
            </div>
        </div>
        <!-- .carousel-inner -->
        <div class="container carousel-overlay text-center">
            <div class=" col-md-12">
                <div class="center">
                    <p class=" text-capitalize introParagraph ">Whats your home worth?</p>

                    <p class="text-capitalize " id="introParagraph2 ">Get sold information for homes like yours
                        right now!</p>
                </div>
                <div class="col-xs-10  col-md-12 col-xs-offset-2  ">
                    <div class="row" id="input-row">
                        <div class=" col-xs-12">
                            <form id="addressForm" name="" method="POST"
                                  action="email.php" class="col-md-10 ">
                                <div class="input-append col-md-10 nf" id="fieldWrapper ">
                                    <input id="searchTextField" type="text" name="address"
                                           class="request-input col-md-5 col-xs-pull-7 col-sm-push-1  values address search-query"
                                           placeholder="Enter Your Home Address">
                                    <input type="text" class="values col-md-2 col-xs-pull-7 col-md-push-1" id="unit"
                                           placeholder="Unit #">
                                    <input type="hidden" name="type" id="changetype-all" checked="checked">
                                    <input type="hidden" name="city_image" id="city_image" value="">
                                    <input type="hidden" name="lat" id="lat">
                                    <input type="hidden" name="lng" id="lng">
                                    <input type="hidden" name="submit" id="submit">
                                    <button type="submit" name="next"
                                            class="btn btn-success worth col-xs-3 col-xs-pull-2 col-md-push-1"
                                            id="next"> Submit
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



 body {
        color: #f6f6ff;
        font-family: 'Raleway', sans-serif;
        font-weight: 200;

    }

input {
    color: #000;
}

select {
    color: #000;
}

option {
    color: #000;
}
.container{
    margin: 0 auto;
}
.container_bottom {
    margin: 0 auto;
    max-width: 900px;
}

.containerPageTwo{
    background-color: green;
    min-height: 720px;
}


p {
    font-size: inherit;
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
}



h1, h2 {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-size: 28px;
    font-weight: 300;
    text-shadow: 2px 2px #ff000;
    color: #fff;
}


/* Input Box */

.values {
    font-size: 1.3em;
    font-family: arial, sans-serif;
}

#input-row {
    margin: 0 auto;

}

.center{
    display: block;
}
.address,.email{
    width:250px;
}
.address, #unit {
    color: blue;
}

.address, #unit, .worth,.email {
    margin-top: 10px;
    height: 45px;
    box-shadow: 2px 2px 14px #000000;
    border-radius: 6px;
    margin-left: 20px;

}

.worth,{
    letter-spacing: 1px;
    width: 130px;

}



.phone {
    width: 200px;
    height: 420px;
    background-color: #245269;
    position: relative;
}

.search-query {
    color: black;
}



/**********************
    IMAGE CONTROLS
***********************/
.slide1, .slide2, .slide3 {



}

/*.slide1 {
    background-image: url('../img/Rosedale-pool-compressor.jpg');
}*/

/*.slide2 {
    background-image: url('../img/tarrytown-compressor.jpg');
}

.slide3 {
    background-image: url('/img/s2-compressor.jpg');
}
*/
.slides {

    margin: auto;
    display: block;

    /* BLUR FILTER ADJUSTMENTS */
    filter: blur(3px);
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);

    /* COLOR ENHANCEMENT ADJUSTMENTS */
    -webkit-filter: grayscale(92%);
    -moz-filter: grayscale(92%);
    -o-filter: grayscale(92%);
}

/************************
 Carousel Fade Effect
 ************************/
.carousel.carousel-slide .item {
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    transition: opacity 1s linear;
    opacity: .5;
    margin-bottom: 30px;
}

.carousel.carousel-slide .active.item {

    opacity: 1;
}

.carousel.carousel-slide .active.left,
.carousel.carousel-slide .active.right {
    left: 0;
    z-index: 2;
    opacity: 1;
    filter: alpha(opacity=0);
    height: 80%;
}

/* Carousel Overlay */
.carousel-overlay {
    position: fixed;
    bottom: 250px;
    right: 0;
    left: 0;
}

.infos{
    display:block;
}


.introParagraph,#introParagraph2{
    color: #A0CC3A;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 1px;
}


.introParagraph {
    font-size: 36px;
    margin:10px;
    font-weight: 300;
}



.img{
    margin:auto;
    display: block;
}

.stuff{
    margin-left: 0;
    margin-right: 0;
}

.greenLeadText{
    color:greenyellow;
    font-size: 14px;
}

.text{
    font-size: 12px;
}

@media only screen and (min-width : 320px) {
    .text{
        text-align: center;
    }
}
@media (max-width: 768px) {
    .text {
        text-align: center;
    }
}

@media (min-width: 1080px) {
    #addressForm{
        margin-left: -20px;
    }

}

/*.top{
    margin-bottom: 80px;
}

.bottom{
margin-bottom:80px;
}

.nf{
    display: block;
}

.sidebar{
    background-color: white;
    min-height: 720px;
}


*/



.fullscrn{
    height: 100%;
    width:100%;
    position: fixed;
}

.carousel-inner{
    height: 100%;
}

.no-pad{
    padding: 0;
    margin: 0;
}

Answer 1

您是否尝试将旋转木马放在

之外

<div class="container">

DIV？或者您是否尝试删除

<div class="row no-pad>

Bootstrap全屏旋转木马

1 个答案: