文档章节

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

Big_BoBo
 Big_BoBo
发布于 2015/03/30 13:59
字数 348
阅读 182
收藏 0
点赞 0
评论 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
粉丝 52
博文 54
码字总数 22137
作品 0
杭州
高级程序员
bootstrap 3, 全局样式、组件 学习总结。

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

horacerain
2016/11/02
50
0
BootStrap

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

大仁孙
2016/07/13
37
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.创建一个<div class="dropDown">的容器 //包裹素也可不为div 但一定要有class .dropDown 2.在容器内添加 <button type="button" class="btn dropdown-toggle" data......

奋斗的小芋头
2016/11/17
22
0
Bootstrap笔记

.navbar——设置nav元素为导航条组件;//已用 .navbar-default——指定导航条组件为默认主题;//已用 .navbar-inverse——指定导航条组件为黑色主题; .navbar-fixed-top——设置导航条组件固...

路霸X
2017/05/09
0
0
bootstrap.js学习笔记

模态弹出框 Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹...

_好久不见
2015/11/05
0
0
Bootstrap响应式导航栏

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

奋斗的小芋头
2016/11/17
14
0
flask自定义错误页面

flask允许程序使用基于模板的错误页面。 最常见的错误代码有两个: a.404,客户端请求位置页面或路由时显示; b.500,有未处理的异常时显示; 1.hello.py:自定义错误页面 @app.errorhandler(...

苗永超
2016/02/15
59
0
Bootstrap 导航元素

本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类.nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class,可以在不同的样式间...

wybo521
2016/01/27
19
0
CSS模块命名规则

头:header   内容:content/container   尾:footer   导航:nav   侧栏:sidebar   栏目:column   页面外围控制整体佈局宽度:wrapper   左右中:left right center   登...

CharmyZ
2016/08/24
13
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sklearn学习笔记之简单线性回归

简单线性回归 线性回归是数据挖掘中的基础算法之一,从某种意义上来说,在学习函数的时候已经开始接触线性回归了,只不过那时候并没有涉及到误差项。线性回归的思想其实就是解一组方程,得到...

wangxuwei
6分钟前
0
0
feign之动态interceptor(二)

背景 上文提到了按照不同的feignClient可以根据多个不同的key来进行多个不同的bean的配置 那么我们如何完成多个interceptor的配置呢? 分析 我们刚提到多个配置的玄机就在FeignClientProper...

Mr_Qi
8分钟前
1
0
Linux Kernel 4.16 系列停止维护,用户应升级至 4.17

知名 Linux 内核维护人员兼开发人员 Greg Kroah-Hartman 近日在发布 4.16.18 版本的同时,宣布这是 4.16 系列的最后一个维护版本,强烈建议用户立即升级至 4.17 系列。 Linux 4.16 于 2018 年...

问题终结者
32分钟前
0
0
Apache配置时.htaccess失效不起作用的原因分析

.htaccess 失效的原因 1. 重写规则有问题,检查自己的重写规则 2.Apache配置问题,配置中没有配置启用 rewrite a2enmod rewrite 3.网站配置文件没有启用配置需要配置 000-default.conf <Dire...

TU-DESGIN
53分钟前
1
0
两个求最大公约数C/C++算法实现

#include<stdio.h> #include<time.h> #include <iostream>using namespace std;//求最大公约数 LCD(Largest Common Division)//短除法 //m=8251, n=6105; int LCD_ShortDiv(int m, ......

失落的艺术
58分钟前
1
0
QueryPerformanceCounter

windows的Sleep函数,睡眠线程指定毫秒数,可以用来做毫秒延时。 对于微秒延时,没有一个现成的函数,但是可以通过 QueryPerformanceFrequency QueryPerformanceCounter 来间接实现。原理就是...

开飞色
今天
1
0
log4j2使用AsyncRoot不显示行号问题处理

<AsyncRoot level="info" includeLocation="true"> <AppenderRef ref="File"/></AsyncRoot><!--1.异步logger,还需要在pom.xml中添加disruptor的依赖。2.includeLocation结合异......

小翔
今天
3
0
安卓手机上 K 歌,声音延迟怎么解决?

这篇文章可以为你提供一个解决录音和播放同步问题的思路,而且解决了声音从手机传输到耳机上有延时的问题。 初识音频 在开始之前,我先简单介绍一下音频相关的基础知识,方便下文理解。 我们...

编辑部的故事
今天
2
0
使用token实现在有效期内APP自动登录功能

使用token实现在有效期内APP自动登录功能 http://sevennight.cc/2016/07/19/auto_login_impl.html

风云海滩
今天
3
0
Spring Boot集成RabbitMQ发送接收JSON

默认情况下RabbitMQ发送的消息是转换为字节码,这里介绍一下如何发送JSON数据。 ObjectMapper 最简单发送JSON数据的方式是把对象使用ObjectMapper等JSON工具类把对象转换为JSON格式,然后发送...

小致dad
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部