我们如何使固定在左侧导航栏旁边的容器具有响应性？

Question

我正在尝试实现一个用户界面，其中 LHS上的导航栏是固定的，内容窗口是可响应的。以下是我的实现：

<div style="width: 15%; float: left; display: inline;>
  <nav class="navbar navbar-inverse navbar-left" style="">
    NAVIGATION CONTENT HERE (FIXED)
  </nav>
 </div>
 <div style="width: 85%; float: right; display: inline;">
    DESIRED RESPONSIVE CONTENT HERE
 </div>

如何实现？

我尝试通过在顶部添加一个容器并将列类添加到两个div中来使用引导程序类。减小浏览器窗口大小时，右侧的div与导航栏div重叠。

Answer 1

您确定要实现这样的设计吗？固定宽度的左侧栏和可变宽度的内容？仅使用引导表网格系统将更加容易和快捷。更不用说它将自动在所有设备和分辨率上运行，而您的设计仅在某些特定分辨率下才有意义。

Answer 2

使用以下方法来修复我的侧面导航栏：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed

1. 将导航栏固定为15％的宽度。
2. 将引导程序类添加到RHS的内容中。