Question

您可以从下面的jfiddle链接中看到我尝试做什么以及问题是什么。在大屏幕上，我在底部有一个很大的空间，我无法移除。在移动设备上，我希望四个图像中的每一个都能占据整个屏幕但却无法使用它。一直试图对此进行排序，我现在只是进入圈内。任何帮助将不胜感激。

欢呼声麦克风。 http://jsfiddle.net/batman13/wpnLjsuo/`

            <div class="col-sm-6 fill50 hidden-xs" style=
             "background-image:url('http://ajsroofingsolutions.com/images/sony_xperia-wallpaper-1920x1080.jpg');">
            <div class="carousel-caption">
                    <h2>Jonny 5 Alive Big Screen </h2>
                </div>
            </div>
             <div class="col-xs-12 fill100 visible-xs" style=
             "background-image:url('http://ajsroofingsolutions.com/images/sony_xperia-wallpaper-1920x1080.jpg');">
            <div class="carousel-caption">
                    <h2>Jonny 5 Alive mobile</h2>
                </div>
            </div>

            <div class="col-sm-6 fill50 hidden-xs" style=
             "background-image:url('http://ajsroofingsolutions.com/images/branding.jpg');">
                <div class="carousel-caption">
                    <h2>Jonny 5 Alive2 Big Screen</h2>
                </div>
            </div>
            <div class="col-xs-12 fill100 visible-xs" style=
             "background-image:url('http://ajsroofingsolutions.com/images/branding.jpg');">
                <div class="carousel-caption">
                    <h2>Jonny 5 Alive mobile</h2>
                </div>
            </div>
        </div>

        <div class="row" style="height:50%">
            <div class="col-sm-12 fill100 hidden-xs" style=
             "background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
            <div class="carousel-caption">
                    <h2>Jonny 5 Alive3 Big Screen</h2>
                </div>
            </div>
        </div>
        <div class="row" style="height:50%">
            <div class="col-xs-12 fill100 visible-xs" style=
             "background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
            <div class="carousel-caption">
                    <h2>Jonny 5 Alive3 Mobile</h2>
                </div>
            </div>
        </div>

    </div>

    <div class="col-sm-6 fill50 hidden-xs" style=
    "background-image:url('http://ajsroofingsolutions.com/images/background.jpg');">
        <div class="carousel-caption">
            <h2>Jonny 5 Alive Big Screen</h2>
        </div>
    </div>
    <div class="col-xs-12 fill100 visible-xs" style=
     "background-image:url('http://ajsroofingsolutions.com/images/background.jpg');">
        <div class="carousel-caption">
            <h2>Jonny 5 Alive Mobile</h2>
        </div>
    </div>
</div>`

Answer 1

白色空间问题是因为：

    <div class="row" style="height:50%">
        <div class="col-sm-12 col-xs-12 fill100 visible-xs" style=
         "background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
        <div class="carousel-caption">
                <h2>Jonny 5 Alive3 Mobile3</h2>
            </div>
        </div>
    </div>

您正在设置行的高度并隐藏内容，因此该行仍在显示。您需要隐藏该行，然后将.visible-xs和.hidden-xs移至行。之后，想要移动设备上的完整视口高度需要您设置媒体查询并将内联高度样式移动到CSS文件中。例如：

    <div class="row visible-xs" id="test">
        <div class="col-sm-12 col-xs-12 fill100" style=
         "background-image:url('http://ajsroofingsolutions.com/images/apple_wooden-wallpaper-1920x1080.jpg');">
        <div class="carousel-caption">
                <h2>Jonny 5 Alive3 Mobile3</h2>
            </div>
        </div>
    </div>

CSS：

#test{
    height: 50%;
}

@media(max-width: 500px){
    #test{    
       height: 100vh;
    }
}

Bootstrap嵌套布局

1 个答案: