在此之前,我先说我之所以要改变网站PC移动双端不同样式的原因。

首先我的网站用到了bootstrap响应式布局,这是我网站的PC端导航栏:

这是我网站的移动端导航栏,看着就难受:

我用谷歌浏览器F12调试,发现了一个东西:

它的意思是说在宽度大于或等于768px时执行的样式代码,刚刚好这也是移动端样式和PC端样式的分水岭,随之我写了:

贴代码:

@media (max-width:768px) {

    .navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 6px;
}
}

这样子就OK了。

再贴一下我的网站的导航栏截图:

bootstrap导航栏PC端移动端之不同样式的更多相关文章

  1. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  2. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  3. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  4. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  5. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  6. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  7. Bootstrap导航栏

    导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...

  8. bootstrap导航栏的辛酸史

    昨天本来想完成test10的页面内容的,但是给老铁拉出去打麻将呢.不过还好昨天写了一些内容.现在奉上.不作更改. 今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题.) 我 ...

  9. eclipse Maven Bootstrap 导航栏

    1.在pom.xml添加两个依赖 Bootstrap 依赖和jQuery依赖 代码如下 <!-- https://mvnrepository.com/artifact/org.webjars/b ...

随机推荐

  1. 获取bin目录

    System.AppDomain.CurrentDomain.SetupInformation.ApplicationBase;//获取bin\Debug\目录System.AppDomain.Cur ...

  2. Educational Codeforces Round 72 (Rated for Div. 2) B题

    Problem Description: You are fighting with Zmei Gorynich — a ferocious monster from Slavic myths, a ...

  3. 023_统计当前 Linux 系统中可以登录计算机的账户有多少个

    #!/bin/bash #方法 1: grep "bash$" /etc/passwd | wc -l #方法 2: #-F END都要大写! awk -F: '/bash$/{x ...

  4. C++问题--fread文件读不完整问题解决

    今天突然遇到一个问题,用fwrite/fread读写文件,发现当fread读取文件时只能读一半, 即使用foef()查看是否读到文件结尾,也是显示文件已经读取到文件末尾,查看文件的返回值发现文件只读取 ...

  5. 第2组 Alpha冲刺(4/4)

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  6. Win内核原理与实现学习笔记1-windows内核版本列表

  7. java编写网站数据抓取

    来公司已经俩月了,每天加班平均工时11个小时的我又想起了老东家温馨舒适安逸的生活.已经有好久没时间读博客写博客了,我觉得我退步了,嗯嗯,我很不开心 今天记录下抓数据的一些东西吧. 数据抓取现在是很普遍 ...

  8. 多层树级关系的json,递归删除空值的数据

    data =[{ "name": "省", "children":[ { "name": "市区", ...

  9. 2016"百度之星" - 初赛(Astar Round2A)1005 BD String(HDU5694)——找规律、字符串对称、分治

    分析:按照题目所给的意思每次处理得到的新的字符串都是具有高度对称性的,举个例子,如题目所给的第三个字符串,最中间的是B然后两边分散开去,一边是B的话另外一边关于这个中心对称的那个位置一定是D,反过来同 ...

  10. eclipse使用正则表达式查找替换

    1,Eclipse ctrl+f 打开查找框2,选中 Regular expressions (正则表达式) 去掉/* */(eclipse)        /\*(.|[\r\n])*?\*/去掉/ ...