在此之前,我先说我之所以要改变网站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. yii行为和过滤器

    行为是对类的功能进行了扩展,针对开闭原则,为了类的扩展而生,不去修改类原有的代码. yii的行为需要继承yii\base\Behavior,这就好比你要给人安装一个胳膊,这个胳膊得是人的,而不能是老虎 ...

  2. Linux下shell命令执行过程简介

    Linux是如何寻找命令路径的:http://c.biancheng.net/view/5969.html Linux上命令运行的基本过程:https://blog.csdn.net/hjx5200/ ...

  3. 用jackson的@JsonProperty注解属性名,会多出一个字段

    遇见了这个情况,我的字段定义是xVal,yVal,用的lombok的@Data注解.然后查询到了下面这偏文章,https://bbs.csdn.net/topics/392305619,里面的回答是图 ...

  4. AttributeError: 'int' object has no attribute 'upper'

    因为安装的openpyxl版本是2.3.4,而代码是: sheet.cell(rownumber, 1).value = data['id']参数不对,应该是: sheet.cell(None, ro ...

  5. MySQL sql join 算发

    在MySQL中,可以使用批量密钥访问(BKA)连接算法,该算法使用对连接表的索引访问和连接缓冲区. BKA算法支持:内连接,外连接和半连接操作,包括嵌套外连接. BKA的优点:更加高效的表扫描提高了连 ...

  6. java+超大文件上传与下载

    ​这里先说下spring mvc 遇到的坑,就是如果文件上传时,后端这样写public String file1(HttpServletRequest request),根据request拿到的东西是 ...

  7. learning express step(二)

    install express-generator C:\Users\admin\WebstormProjects\learning-express-step2>npm install expr ...

  8. 【概率论】3-7:多变量分布(Multivariate Distributions Part II)

    title: [概率论]3-7:多变量分布(Multivariate Distributions Part II) categories: Mathematic Probability keyword ...

  9. wait系列

    转自 http://blog.csdn.net/todd911/article/details/15028511 1.wait函数和waitpid函数 当一个进程正常或异常终止时,内核就向其父进程发送 ...

  10. ECMAScript 5.0 基础语法(下)“稍微重点一点点”

    接上篇 七.常用内置对象(复杂数据类型)(重点) (1)数组Array 创建:例  var colors = ['red','blue','green']       #推荐这样,因为简单粗暴 或:v ...