Bootstrap4 - 2列：左滚动，右固定映射

使用Bootstrap4创建双列布局，左列应该滚动（当前不是），右列不应该滚动（目前它按照滚动条在图像中）。地图应该始终是窗口的高度（我认为在Bootstrap中称为“视口”）。仅供参考，左栏中的内容随时间而作为服务器推出更多的主机到它：Bootstrap4 - 2列：左滚动，右固定映射

HTML：

<div id="app"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-2">list of hosts (should scroll)</div> 
      <div class="col-md-10" id="map">google map (should NOT scroll)</div> 
     </div> 
    </div> 
</div>

CSS：

.col-md-2 { 
    border-right: 1px solid black; 
    min-height: 100vh; 
    overflow-y: scroll; 
    padding: 0; 
}

感谢

来源

2017-09-03 fire_water

下面是使用固定边栏的示例：https://jsfiddle.net/Lbn21js8/1/

我添加了一个id选择的边栏，和背景颜色：

<div id="app"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div id="sidebar" class="col-md-2 bg-light ">list of hosts (should scroll)</div> 
     <div class="col-md-10 ml-auto" id="map">google map (should NOT scroll)</div> 
    </div> 
    </div> 
</div>

利用该CSS：

#sidebar { 
    border-right: 1px solid black; 
    overflow-y: scroll; 
    padding: 0; 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
}

的链接的jsfiddle附加一新段的边栏中每1.5秒，所以如果您等待足够长时间，您会看到侧栏的滚动条变为活动/可滚动。

有了这个，只要你限制地图部分永远不会比视口大，你不会看到页面的滚动条。

来源

2017-09-03 03:25:28

作为一个快速提示，偏移类应该会在下一个Beta版本中出现，所以你应该用'offset-2'来代替'ml-auto'类。 –

谢谢，泰森。除了你的代码之外，在'＃map'中添加'min-height：100vh;'使它工作。 “ml-auto”的工作是什么？ –

ml-auto将左边距设置为自动。这就是当前Beta如何将内容推向右侧，而不是Alpha使用的偏移类 –

我用这个CSS和它的工作对我来说：

CSS：

#map { 
    margin-left:20%; 
    position:fixed; 
}

这将使左栏col-md-2是滚动，防止右列col-md-10从滚动。通过添加margin-left:20%;，右列不会与左侧的内容重叠。

来源

2017-09-03 03:30:31

Bootstrap4 - 2列：左滚动，右固定映射

回答

相关问题