如何消除 .dropdown 和 .dropdown-menu 之间的间隙

2024-03-05

在移动视图中时,单击.dropdown菜单之间有一个小空间.dropdown.dropdown-menu.

如图所示

Question是否可以消除那个小空间/间隙?

Codepen 示例代码视图 http://codepen.io/riwakawebsitedesigns/pen/wWRVKv and 全视图 http://codepen.io/riwakawebsitedesigns/full/wWRVKv/

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: #fff;
    background: #222;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #000000;
}

.row {
    margin-bottom: 20px;
}

.row:last-of-type {
    margin-bottom: 0;
}

.bg {
    background-color: #eeeeee;
    padding: 40px 40px 40px 40px;
}

#custom-bootstrap-menu {
    margin-top: 40px;
    margin-bottom: 0;
    border-color: 0;
}

#custom-bootstrap-menu .navbar-brand {
    color: rgba(255, 255, 255, 1);
}

#custom-bootstrap-menu {
    font-size: 14px;
    background-color: rgba(51, 51, 51, 1);
    border-width: 0px;
    border-radius: 0px;
}

#custom-bootstrap-menu .navbar-nav > li > a {
    color: #ffffff;
}

@media (min-width: 768px) {
    #custom-bootstrap-menu .navbar-nav > li > a.link1 {
        border-top: 3px solid #e18728;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link1:hover,
    #custom-bootstrap-menu .navbar-nav > li > a.link1:focus {
        color: #ffffff;
        background-color: #e18728;
    }

    #custom-bootstrap-menu .navbar-nav > li.active > a.link1 {
        color: #ffffff;
        background-color: #e18728;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link2 {
        border-top: 3px solid #BE4C39;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link2:hover,
    #custom-bootstrap-menu .navbar-nav > li > a.link2:focus {
        color: #ffffff;
        background-color: #BE4C39;
    }

    #custom-bootstrap-menu .navbar-nav > li.active > a.link2 {
        color: #ffffff;
        background-color: #BE4C39;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link3 {
        border-top: 3px solid #9351A6;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link3:hover,
    #custom-bootstrap-menu .navbar-nav > li > a.link3:focus {
        color: #ffffff;
        background-color: #9351A6;
    }

    #custom-bootstrap-menu .navbar-nav > li.active > a.link3 {
        color: #ffffff;
        background-color: #9351A6;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link4 {
        border-top: 3px solid #4472B9;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link4:hover,
    #custom-bootstrap-menu .navbar-nav > li > a.link4:focus {
        color: #ffffff;
        background-color: #4472B9;
    }

    #custom-bootstrap-menu .navbar-nav > li.active > a.link4 {
        color: #ffffff;
        background-color: #4472B9;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link5 {
        border-top: 3px solid #4CA454;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link5:hover,
    #custom-bootstrap-menu .navbar-nav > li > a.link5:focus {
        color: #ffffff;
        background-color: #4CA454;
    }

    #custom-bootstrap-menu .navbar-nav > li.active > a.link5 {
        color: #ffffff;
        background-color: #4CA454;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link6 {
        border-top: 3px solid #d49b00;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link6:hover,
    #custom-bootstrap-menu .navbar-nav > li > a.link6:focus {
        color: #ffffff;
        background-color: #d49b00;
    }

    #custom-bootstrap-menu .navbar-nav > li.active > a.link6 {
        color: #ffffff;
        background-color: #d49b00;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link7 {
        border-top: 3px solid #444444;
    }

    #custom-bootstrap-menu .navbar-nav > li > a.link7:hover,
    #custom-bootstrap-menu .navbar-nav > li > a.link7:focus {
        color: #ffffff;
        background-color: #444444;
    }

    #custom-bootstrap-menu .navbar-nav > li.active > a.link7 {
        color: #ffffff;
        background-color: #444444;
    }
}

#custom-bootstrap-menu .navbar-nav > li > a:hover,
#custom-bootstrap-menu .navbar-nav> li > a:focus {
    color: #5a5a5a;
    transition: color 0.25s;
}

#custom-bootstrap-menu .navbar-nav>.active > a,
#custom-bootstrap-menu .navbar-nav>.active > a:hover,
#custom-bootstrap-menu .navbar-nav>.active > a:focus {
    color: rgba(85, 85, 85, 1);
    background-color: rgba(231, 231, 231, 1);
}

#custom-bootstrap-menu .navbar-toggle {
    border-color: #ddd;
}

#custom-bootstrap-menu .navbar-toggle:hover,
#custom-bootstrap-menu .navbar-toggle:focus {
    background-color: #ddd;
}

#custom-bootstrap-menu .navbar-toggle {
    border: none;
    background-color: none;
    font-size: 2.5rem;
    cursor: pointer;
}

#custom-bootstrap-menu .navbar-toggle:hover,
#custom-bootstrap-menu .navbar-toggle:focus {
    background: none;
}

#custom-bootstrap-menu .navbar-nav > .open > a,
#custom-bootstrap-menu .navbar-nav > .open > a:hover,
#custom-bootstrap-menu .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #262626;
}

@media (max-width: 767px) {
    #custom-bootstrap-menu .navbar-nav > li > a:hover,
    #custom-bootstrap-menu .navbar-nav > li > a:focus {
        background-color: #404040;
        color: #ffffff;
    }

    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > li > a {
        margin-top: 0;
        background-color: #404040;
        color: #777;
    }

    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > li > a:hover,
    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: transparent;
    }

    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .active > a,
    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .active > a:hover,
    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #555;
        background-color: #404040;
    }

    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .disabled > a,
    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #ccc;
        background-color: transparent;
    }
}

.btn {
    border: 0;
}

.btn-default {
    border-radius: 0;
    color: #ffffff;
    background-color: #333333;
}

.btn-default:hover {
    background-color: #4d4d4d;
    color: #ffffff;
}

.btn-primary {
    border-radius: 0;
    color: #ffffff;
    background-color: #1199aa;
}

.btn-primary:hover {
    background-color: #13aec1;
    color: #ffffff;
}

.btn-success {
    border-radius: 0;
    color: #ffffff;
    background-color: #77cc22;
}

.btn-success:hover {
    background-color: #84dc2c;
    color: #ffffff;
}

.btn-info {
    border-radius: 0;
    color: #ffffff;
    background-color: #8899ee;
}

.btn-info:hover {
    background-color: #9eacf1;
    color: #ffffff;
}

.btn-warning {
    border-radius: 0;
    color: #ffffff;
    background-color: #ee8822;
}

.btn-warning:hover {
    background-color: #f0953a;
    color: #ffffff;
}

.btn-danger {
    border-radius: 0;
    color: #ffffff;
    background-color: #dd5544;
}

.btn-danger:hover {
    background-color: #e1695a;
    color: #ffffff;
}

.panel {
    border: none;
    border-radius: 0;
}

.panel-body {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.panel-default > .panel-heading {
    border-radius: 0;
    background-color: #333;
    color: #ffffff;
}

.panel-primary > .panel-heading {
    border-radius: 0;
    background-color: #19a;
    color: #ffffff;
}

.panel-success > .panel-heading {
    border-radius: 0;
    background-color: #7c2;
    color: #ffffff;
}

.panel-info > .panel-heading {
    border-radius: 0;
    background-color: #89e;
    color: #ffffff;
}

.panel-warning > .panel-heading {
    border-radius: 0;
    background-color: #e82;
    color: #ffffff;
}

.panel-danger > .panel-heading {
    border-radius: 0;
    background-color: #d54;
    color: #ffffff;
}

.alert {
    border: 0;
}

.alert-success {
    color: #ffffff;
    background-color: #7c2;
}

.alert-info {
    color: #ffffff;
    background-color: #89e;
}

.alert-warning {
    color: #ffffff;
    background-color: #e82;
}

.alert-danger {
    color: #ffffff;
    background-color: #d54;
}

尝试添加:

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    padding-top: 0;
  }
}

你可以加padding-bottom: 0; too.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何消除 .dropdown 和 .dropdown-menu 之间的间隙 的相关文章

  • 如何让CSS选择以字符串开头的ID(不是Javascript)?

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro
  • 将图像编码为base64有什么效果?

    如果我将图像 jpg 或 png 转换为 base64 那么它会更大 还是具有相同的大小 会大多少呢 是否建议在我的网站上使用 Base64 编码的图像 大约会大 37 非常粗略地说 Base64 编码的二进制数据的最终大小等于原始数据大小
  • 从字体到跨度(大小和颜色)和背面的正则表达式(VB.NET)

    我正在寻找一个正则表达式 可以将我的字体标签 仅具有大小和颜色属性 转换为具有相关内联CSS的span标签 如果有帮助的话 这将在 VB NET 中完成 我还需要一个正则表达式来实现相反的效果 下面详细说明的是我正在寻找的转换示例 font
  • CSS3变换:悬停时翻译,带有过渡[重复]

    这个问题在这里已经有答案了 这应该很简单 我的 HTML 中有一堆锚点 如下所示 a href Link 1 a a href Link 2 a a href Link 3 a a href Link 4 a a href Link 5 a
  • 在其他不可滚动的 div 上滚动时如何滚动可滚动的 div?

    我知道这个问题听起来很令人困惑 但这就是我想要做的 在下面的代码片段中 如果用户在绿色 div 上滚动 我希望黄色 div 相应地滚动 就像滚动黄色 div 一样 请注意 黄色 div 有overflow auto 但绿色的则不然 docu
  • 如何将 div 与其父级的顶部对齐,但保持其内联块行为?

    See http jsfiddle net b2BpB 1 http jsfiddle net b2BpB 1 问 如何让box1和box3对齐到父div的顶部boxContainer boxContainerContainer backg
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 将输入中每个单词的第一个字符设为大写

    我想知道如何在输入区域自动生成单词的第一个字符 目前我的代码是 Name
  • 使用 CSS 覆盖透明 div 中的不透明文本

    我试图使透明 div 内的文本没有不透明度 也就是全黑 div style background 3cc p style background 000 This text should be all black p div 只用 CSS 就
  • 模态中的引导模态

    如何使用 Jquery 在另一个模态中构建引导模态 第一个模态应该在后台 当我参考引导文档时 发现一次显示多个模式需要自定义代码 任何想法 您可能想尝试 Bootstrap Modal 插件 此处演示 可堆叠 http jschr gith
  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载!仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有
  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如
  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di

随机推荐