完全坚持使用bootstrap菜单
我想要这样的事情：
https://jsfiddle.net/clankill3r/34Lf1mke/
但标题和菜单应始终固定在顶部。
但无论我尝试什么，如果有一件事情可以解决另一件事情。 或者： - 宽度/填充不正确 - Foo内容的东西落后于其他东西 - 响应能力中断 - 消失了 -等等。等等 -affix表现得很奇怪。
这就像一个递归问题。
我也尝试过bootstap-4，但这更糟糕。
我最近的尝试完全破了。 https://jsfiddle.net/clankill3r/Lwwe7o1j/
通常情况下，我会问一个更具体的问题，但我不能再看清了。 有人可以指导我朝正确的方向发展吗？
这是一个起点：
<div class="container">
<div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div>
<div class="clearfix">
</div>
<div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div>
<div class="content col-xs-12 col-md-6 col-lg-8">
<div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
<div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
<div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
<div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
<div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
<div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
<div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
<div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
<div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
<div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
<div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
<div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
<div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
<div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
<div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
<div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
<div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
<div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
<div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
<div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
<div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
<div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
<div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
<div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
</div>
</div>
编辑，详细说明：
在手机上它应该是这样的：
（紫色是标题，蓝色是菜单，橙色是内容）。
滚动标题时，菜单不应滚动。 这是滚动了一下的一个例子。
对于更大的屏幕，它将是这样的：
滚动：
2 个答案:
答案 0 :(得分：0)
使用下面的代码。我认为这段代码非常适合您。如果代码不适合您。在下面的评论中提到问题。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Affix Vertical Side Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
font-family: roboto;
}
.affix{
top: 0px;
width: 23%;
}
p{
font-size: 18px ! important;
}
#title1 {color: #000; background-color: orange; padding: 20px;}
#title2 {color: #000; background-color: orange; padding: 20px;}
#title3 {color: #000; background-color: orange; padding: 20px;}
#title {background-color: aqua;}
#menu {background-color: aquamarine;}
.content {background-color: orange;}
.nav-stacked li a{
color: black ! important;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<div class="container-fluid"><!--Content fluid starts-->
<div class="row"><!--Row starts-->
<nav class="col-lg-3" id="myScrollspy"><!--Column for (Vertical side menu Here >>>)-->
<div class="panel panel-default" data-spy="affix" data-offset-top="70">
<div class="panel-heading" id="title">THE TITLE</div><!--Your Title-->
<div class="panel-body" id="menu"> <!--Panel Body starts-->
<ul class="nav nav-pills nav-stacked">
<li><a href="#title1">Title 1</a></li><!--Menu title1-->
<li><a href="#title2">Title 2</a></li><!--Menu title1-->
<li><a href="#title3">Title 3</a></li><!--Menu title1-->
</ul>
</div><!--Panel Body ends-->
</div>
</nav><!--Nav & Column ends-->
<div class="col-lg-9"><!--Column starts your content Here >>>-->
<div id="title1"><!--Title 1 content starts-->
<h1 class="text-center">Title 1</h1>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
</div><!--Title 1 content ends-->
<div id="title2"> <!--Title 2 content starts-->
<h1 class="text-center">Title 2</h1>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
</div><!--Title 2 content ends-->
<div id="title3"> <!--Title 3 content starts-->
<h1 class="text-center">Title 3</h1>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
</div><!--Title 3 content ends-->
</div><!--Column content ends-->
</div><!--Row ends-->
</div><!--Content fluid ends-->
</body>
</html>
答案 1 :(得分：0)
编辑----
这是您要求的代码。使用此代码，它将非常适合您。
快乐编码： - ）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Affix Vertical Side Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
font-family: roboto;
}
.affix{
top: 70px;
width: 23%;
}
p{
font-size: 18px ! important;
}
#title1 {color: #000; background-color: orange; padding: 20px;}
#title2 {color: #000; background-color: orange; padding: 20px;}
#title3 {color: #000; background-color: orange; padding: 20px;}
#title {background-color: aqua;}
#menu {background-color: aquamarine;}
.content {background-color: orange;}
.navbar-default{
background-color: purple ! important;
}
.nav-stacked li a{
color: black ! important;
}
.navbar-brand{
color: white ! important;
}
.navbar-nav li a{
color: white ! important;
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
body{
padding-top: 70px;
}
.affix{
top: 50px;
width: 100%;
z-index: 100;
}
}
/* Large desktops and laptops */
@media (min-width: 1200px) {
body{
padding-top: 70px;
}
.affix{
top: 70px;
width: 23%;
}
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid"><!--Content fluid starts-->
<div class="row"><!--Row starts-->
<nav class="col-lg-3" id="myScrollspy"><!--Column for (Vertical side menu Here >>>)-->
<div class="panel panel-default" data-spy="affix" data-offset-top="100">
<div class="panel-heading" id="title">THE TITLE</div><!--Your Title-->
<div class="panel-body" id="menu"> <!--Panel Body starts-->
<ul class="nav nav-pills nav-stacked">
<li><a href="#title1">Title 1</a></li><!--Menu title1-->
<li><a href="#title2">Title 2</a></li><!--Menu title1-->
<li><a href="#title3">Title 3</a></li><!--Menu title1-->
</ul>
</div><!--Panel Body ends-->
</div>
</nav><!--Nav & Column ends-->
<div class="col-lg-9"><!--Column starts your content Here >>>-->
<div id="title1"><!--Title 1 content starts-->
<h1 class="text-center">Title 1</h1>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
</div><!--Title 1 content ends-->
<div id="title2"> <!--Title 2 content starts-->
<h1 class="text-center">Title 2</h1>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
</div><!--Title 2 content ends-->
<div id="title3"> <!--Title 3 content starts-->
<h1 class="text-center">Title 3</h1>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
<p> Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
Foo Foo Foo Foo
Bar Bar Bar Bar
Ham Ham Ham Ham
Jam Jam Jam Jam
</p>
</div><!--Title 3 content ends-->
</div><!--Column content ends-->
</div><!--Row ends-->
</div><!--Content fluid ends-->
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？