Question

我一直在使用这个模板：http://www.bootstrapzero.com/bootstrap-template/google-maps来开发这个：http://www.gencat.cat/patronatmontserrat/proves/Carousel_4/itinerari_1.html并且它在屏幕和平板电脑上工作得很完美但是当它调整到手机时，它是相当的凌乱，因为屏幕仍然分成两半而且它不方便（它不能正确地看到内容）所以我想要漂浮文本并在地图之后，好像它是只有一页（但只有手机）。

这里是现在的代码：

<div class="container-fluid" id="main">
    <div class="row">
        <div class="col-xs-6" id="left">

            ....all whole text and images...

        </div>
        <div class="col-xs-6" id="map"></div>
    </div>
</div>

CSS /

#main, #main>.row {
    height:100%;
    text-align: justify;
}

#main>.row {
    overflow-y:scroll;
}

#main p {
    font-family: 'ralewayregular';
    font-size: 1.2em;
    margin-top: 10px;
}

#left {
    height:100%;
    padding-top: 50px;
}

#map {
    width:49%;
    height:calc(100% - 0);
    position:absolute;
    right:16px;
    top:0px;
    bottom:0;
    overflow:hidden;
}

我该怎么办？每次我尝试两个div都相互重叠!!

Answer 1

您可以使用Responsive utilities来获得更好的效果。例如

如果您想在平板电脑，台式机，笔记本电脑和大屏幕上显示一些内容，请使用

<p class="visible-sm visible-md visible-lg"> some text</p>

如果您想在移动设备上显示一些文字，请使用

<p class="visible-xs"> some text</p>

使用上述参考，您可以根据需要编辑/修改您的CSS ...

希望这可以帮助你...

如何在bootstrap中浮动div而不重叠

1 个答案: