在此之前,我先说我之所以要改变网站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. CF741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths (dsu on tree) 题解

    先说一下dsu算法. 例题:子树众数问题. 给出一棵树,每个点有点权,求每个子树中出现次数最多的数的出现次数. 树的节点数为n,\(n \leq 500000\) 这个数据范围,\(O(n \sqrt ...

  2. CSP-S模拟68 题解

    T1: 不难想到贪心,但是怎么贪,他有两个限制条件,所以不是很好搞,所以用一个类似与wqs二分的思路我可能在口胡,因为你肯定要把最小的给删掉,所以你限定一个x或y,然后在选出另一个限制,所以要同时维护 ...

  3. 自制 yum 源仓库

    转自:https://www.cnblogs.com/marility/p/7278374.html 背景 客户服务器为内网机器,centos7系统,且无法与外网连接.需要部署对应的LANMP环境及其 ...

  4. JavaWeb_(SpringMVC框架)测试SpringMVC&Spring&MyBatis三大整合

    搭建 SpringMVC&Spring&MyBatis三大整合 传送门 1.准备 测试搭建S pringMVC&Spring&MyBatis三大整合 用例   a)准备 ...

  5. ROS indigo下Kinect v2的驱动安装与调试

    ROS indigo下Kinect v2的驱动安装与调试 一.libfreenect2源码安装与测试 github地址:https://github.com/OpenKinect/libfreenec ...

  6. 使用log4j使某些java类的日志信息输出到指定日志文件中

    Log4j 是 Apache 的一个开放源代码项目,通过使用 Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI 组件.甚至是套接口服务器.NT 的事件记录器.UNIX Syslog ...

  7. 重读APUE(2)-read返回值少于要求读取字节数

    返回值: 成功返回读到的字节数,如果达到文件尾,则返回0:注意:如果有数据第一次读取会返回全部读到的字节数,下一次读取才会返回0: 出错返回-1: 返回值少于要求读取字节数的情况: 1. 读取普通文件 ...

  8. varnish web cache服务

    varnish介绍 缓存开源解决方案: - varnish - 充分利用epoll机制(能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率),并发量大,单连接资源较轻 - squid ...

  9. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  10. 01背包---P2392 kkksc03考前临时抱佛脚

    P2392 kkksc03考前临时抱佛脚 题解 01背包,类似于这道题,相似度99.999999%: 01-背包 P2663 越越的组队   一共有4科,每科的时间独立,然后每一科做一遍 P2663越 ...