首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Navbar药丸颜色在Bootstrap4中填充全高

作者：钟孝健V | 来源：互联网 | 2023-02-01 10:14
如何解决《Navbar药丸颜色在Bootstrap4中填充全高》经验，为你挑选了1个好方法。

如何使导航项目的背景完全充满颜色,而不仅仅是其中的一部分？

这是我尝试使用Bootstrap药丸,但它没有做到这一点.此外,我尝试了自己的CSS,但它和药丸一样.

总而言之,我如何使我的导航栏(在图像中)看起来像这个,仅关于导航项CSS的背景颜色.

在此输入图像描述

更新:添加了HTML和CSS代码

我的代码:HTML 

            

             Purrfection Shop

CSS:

.navbar {

            border-bottom: 1px solid #F5F5F5;
            background-color: white;
            text-transform: uppercase;
            letter-spacing: 2px;

        }

Circle B.. 13

关键是从导航栏中删除顶部和底部填充,并将其添加到药丸,从药丸中删除圆角,然后将自定义cssin包装在媒体查询中以使其响应.

这是JSfiddle.

这是它的样子: 在此输入图像描述

这是代码:



1> Circle B..：

关键是从导航栏中删除顶部和底部填充,并将其添加到药丸,从药丸中删除圆角,然后将自定义cssin包装在媒体查询中以使其响应.

这是JSfiddle.

这是它的样子: 在此输入图像描述

这是代码:

推荐阅读
  • utf-8

    webpack二刷之二、loader资源模块加载器

    loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件，也就是说它会把打包过程中所有遇到的 ... [详细]
  • int

    常用的CSS属性及用法整理

    本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]
  • int

    Android开发笔记：使用Picasso加载网络图片等比例缩放

    在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]
  • int

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • foreach

    javascript – 概述在Firefox上无法正常工作

    javascript – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • int

    Spring特性实现接口多类的动态调用详解

    Spring特性实现接口多类的动态调用详解
    本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍，以及getBeansOfType方法的应用，解决了在实际工作中遇到的接口及多个实现类的问题。同时，文章还提到了SPI使用的不便之处，并介绍了借助ApplicationContext实现需求的方法。阅读本文，你将了解到Spring特性的实现原理和实际应用方式。 ... [详细]
  • python

    的错误消息：

    ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • python

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • int

    java 线程死锁模拟

    1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]
  • int

    XML介绍与使用的概述及标签规则

    XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途，包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则，包括标签的尖括号和合法标识符的组成，标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读，读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • int

    VB.NET在线急等问题解决方法，如何统计数据库字段下的数据并显示在文本框里？

    本文介绍了一个在线急等问题解决方法，即如何统计数据库中某个字段下的所有数据，并将结果显示在文本框里。作者提到了自己是一个菜鸟，希望能够得到帮助。作者使用的是ACCESS数据库，并且给出了一个例子，希望得到的结果是560。作者还提到自己已经尝试了使用"select sum(字段2) from 表名"的语句，得到的结果是650，但不知道如何得到560。希望能够得到解决方案。 ... [详细]
  • int

    自动轮播，反转播放的ViewPagerAdapter的使用方法和效果展示

    自动轮播，反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter，并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • main

    Support Paged.JS for automatic hugo resume> PDF conversion.

    FeatureRequestIsyourfeaturerequestrelatedtoaproblem?Please ... [详细]
  • main

    手机移动端HTML5和JavaScript如何实现视频上传和压缩视频质量？

    本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量，或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频，只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量，只有使用JAVA编写Android客户端才能实现压缩。此外，作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因，并提供了解决方法。最后，作者还介绍了一个用于处理图片的类，可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • main

    使用圣杯布局模式实现网站首页的内容布局

    使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
author-avatar
钟孝健V
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有