Question

我在下面有这个页面：

 <nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">

        ......
        </div>
    </div>
</nav>


<div class="container-fluid">
<div class="row">
    <div class="col-md-3 col-sm-5" id="column1">
        <!--  Sidebar content SCROLLABLE -->
        ....
        <!-- Sidebar content end> -->
        </div>
    <div class="col-md-9 col-sm-7" id="column2">
        <!--  body content FIXED -->
        ....
        <!-- body content end> -->
        </div>

默认情况下，Laravel从命令行“php make：auth”

输入导航栏

我想要实现的是左边的column1可滚动，而右边的column2是固定的。 column1和column2都应从导航栏下方开始，并且应该到达窗口的末尾。我已经使用绝对位置，jQuery或两者的混合尝试了大量解决方案。到目前为止，这是我找到的更接近的解决方法：http://jsfiddle.net/vgxvpjdv/3/ 但它对xs设备不起作用，因为当用户点击按钮以展开导航栏（折叠汉堡包）时，项目与下面的列重叠。这是我想要实现的方案：

我想保留引导网格类（如果可能的话），以使我的列响应。

这是完整的导航栏代码：

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">

            <!-- Collapsed Hamburger -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Branding Image -->
            <a class="navbar-brand" href="{{ url('/') }}">
                Laravel
            </a>
        </div>

        <div class="collapse navbar-collapse" id="app-navbar-collapse">
            <!-- Left Side Of Navbar -->
            <ul class="nav navbar-nav">
                <li><a href="{{ url('/home') }}">Home</a></li>
            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="nav navbar-nav navbar-right">
                <!-- Authentication Links -->
                @if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                    <li><a href="{{ url('/register') }}">Register</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                        </ul>
                    </li>
                @endif
            </ul>
        </div>
    </div>
</nav>

Answer 1

以下是我修复它的方法：

导航栏固定在顶部

<nav class="navbar navbar-default navbar-fixed-top sticky">

使用固定位置和响应

的导航栏下方2列的CSS

@media (min-width: 768px) { 
  #column1 {
  position:fixed;
  top:50px;
  left:0;
  overflow-y: scroll;
  height:calc(100% - 50px);
  }
  #column2 {
  position:fixed;
  top:50px;
  right:0px;
  overflow-y: hidden;
  height:calc(100% - 50px);
  }
}

Answer 2

您是否尝试过使用CSS属性'overflow-y：scroll'和'overflow-y：fixed'？

这应解决问题，只需给出各个列的类名，例如.scrollcontent和.fixedcontent

并在你的CSS中给他们溢出属性。

.scrollcontent { overflow-y：scroll; //如果不需要滚动，则使用auto }

Bootstrap 3：导航栏下方的可滚动列

2 个答案: