在此之前,我先说我之所以要改变网站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. session.getdefaultinstance和getinstance的区别

    如果想要同时使用两个帐号发送javamail,比如使用1@a.com发送1#邮件,使用2@a.com发送2#邮件,这时候,你就需要同时创建两个java.mail.Session对象.但是如果你仍然使用 ...

  2. poi操作excel之: 将NUMERIC转换成TEXT

    一.NUMERIC TO TEXT(生成excel)代码生成一个excel文件: public static void generateExcel() throws Exception { XSSFW ...

  3. shell 获取指定ip的丢包率

    shell 获取指定ip的丢包率 丢包率大于10%就重新网络 使用sed 替换字符串 [[ $(ping -c 10 -W 1 baidu.com | awk '$6 ~ /%/{print $6}' ...

  4. SpringAOP配置与使用(示例)

    1.pom.xml追加 spring-aspects aspectjrt 为控制器以外的类织入切面 2.新建spring-aop.xml <?xml version="1.0" ...

  5. MySQL新特性文档型数据库

    mongodb在文档型数据库这方面一直做的很好,也发展了很多年,MySQL作为一个比较大众的数据库也慢慢支持了该特性,下面介绍一下MySQL支持文档型数据库的简单操作. 环境: 主机名 IP 系统 软 ...

  6. DB缓存一致性

    直接硬核干货,去掉前戏. 方案大致说明 1:假设对redis中存在一对key,value的对应关系是 key=money,value=666 2:当修改线程修改key时先将key设置成value=66 ...

  7. UVALive 3716 DNA Regions ——(式子变形)

    一开始直接想到了二分,写了一发然后过了全部样例就交了,果断WA.因为这个问题显然是不满足单调性的. 然后想之前刚做的斜率优化DP,但是那个是求斜率最大值,不是求满足斜率大于一定值的最大长度的.也构造不 ...

  8. CF1030C

    CF1030C 题意: 给你一个数字,问能否拆分成k段,使得每一段的每一位数字相加结果相等. 解法: 考虑数位DP. 暴力按位考虑每一位是否满足条件 CODE: #include<cstdio& ...

  9. Python 上下文管理器模块--contextlib

    在 Python 处理文件的时候我们使用 with 关键词来进行文件的资源关闭,但是并不是只有文件操作才能使用 with 语句.今天就让我们一起学习 Python 中的上下文管理 contextlib ...

  10. Java锁优化

    Java锁优化 应用程序在并发环境下会产生很多问题,通常情况下,我们可以通过加锁来解决多线程对临界资源的访问问题.但是加锁往往会成为系统的瓶颈,因为加锁和释放锁会涉及到与操作系统的交互,会有很大的性能 ...