文档章节

Bootstrap中nav在container中用affix时,nav宽度撑不满容器的解决方案

Big_BoBo
 Big_BoBo
发布于 2015/03/30 13:59
字数 348
阅读 195
收藏 0

    这是我的Bootstrap页面头,我要做的是,当滚动页面到网页标题栏之后,把导航栏固定在页面顶端,适用了Bootstrap的Affix组件;

    这是我的css片段,我的网页标题高度为80px,当导航栏滚动了80px后,由于如下css设定了top: 0px,

所以会自定固定在页头;

/* 不加上这一行, 当滚动到导航条时,仍然会留出data-offset-top设定的像素的高度 */
div.head.affix{
    top: 0px; /* Set the top position of pinned element */
}



    这是我的页面部分代码;
<body>
		<div class="container">
			<div style="height: 80px">
			  <h1>网站标题 <small> 网站副标题</small></h1>
			</div>
			
			<div class="head " data-spy="affix" data-offset-top="80">
			
				<!-- 默认 navbar navbar-default navbar-fixed-top ; 反色导航条 navbar navbar-inverse navbar-fixed-top --> 
				<nav class="navbar navbar-default" role="navigation">

    这是滚动到80px后的效果;

    发现导航的宽度,自动适应了内容的宽度,这当然不是我想要的效果,所以我必须借助jquery把导航的宽度设置为container 的宽度;

$('div.head')
	    	  .on('affix.bs.affix', function () {
	    	    var margin =  parseInt($('.container').css("margin-right"));
	    	    var padding = parseInt($('.container').css("padding-right"));
	    	    $("div.head").css("right",margin+padding);
	    	    $("div.head").width($(".container").width());
	    	  })
	    	  .on('affix-top.bs.affix', function () {
	    	    $("div.head").css("right","0px");
	    	    console.log('在滚动到top的高度时,设定div head的宽度为container的宽度:'+$(".container").width());
	    	    $("div.head").width($(".container").width());
	    	  });



    下面来看下效果:

    完美达到我想要的效果,duang,收工



© 著作权归作者所有

共有 人打赏支持
Big_BoBo
粉丝 53
博文 54
码字总数 22137
作品 0
杭州
高级程序员
私信 提问
BootStrap

bootstrap下载: 英文网址: 中文网址: 选择编译压缩版本,可下载到本地使用,也可网上引用CDN bootstrap应用 - 引用框架(基础)与注意点: bootstrap学习 文中带 . 的标号为选择器,如.le...

大仁孙
2016/07/13
37
0
bootstrap 3, 全局样式、组件 学习总结。

全局样式css 概览 移动设备优先 布局容器 栅格系统 .row > .col- 列必须包含在行内, 默认12列 根据媒体查询将列前缀分为4种 列偏移 col-lg-offset- 表示向右偏移列。 排版 对齐: .text-left...

horacerain
2016/11/02
50
0
Bootstrap 下拉菜单

一.一个简单的下拉菜单 1.创建一个<div class="dropDown">的容器 //包裹素也可不为div 但一定要有class .dropDown 2.在容器内添加 <button type="button" class="btn dropdown-toggle" data......

奋斗的小芋头
2016/11/17
22
0
bootstrap3 - 自适应导航

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>自适应导航</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"/> <link href="......

iNiL0119
2015/09/28
980
0
Bootstrap响应式导航栏

一.创建一个导航栏的步骤 1.<nav></nav>标签添加 .navbar .navbar-default 2.像<nav>内部添加一个标题<div> 带有class .navbar-header,内部包含带有 class navbar-brand的<a>元素--让文本看......

奋斗的小芋头
2016/11/17
14
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
23分钟前
0
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
5
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部