程序员经验分享-hwhale

Bootstrap 4添加垂直分隔管

2024-04-18

您好，我正在尝试在导航链接之间添加一些分隔符，但它不起作用

我尝试添加

nav-link:after {
content:"|";
}

但它不起作用或显示在左侧。

这是我的代码：

    <nav class="navbar navbar-expand-md navbar-dark bg-color">
        <div class="navbar-brand header-title">Title</div> <!-- this is in the middle -->
        <div class="navbar-collapse collapse" id="collapsingNavbar">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="navbar-brand" href="#">
                        <img src="logo.png" />
                    </a>
                </li>
            </ul>
<!-- Here between nav-item I would lik to add pipe speparator -->
            <ul class="navbar-nav ml-auto">
                <div class="nav-item nav-link mr-md-2">
                    <div> some test some test</div>
                </div>
                <div class="nav-item nav-link mr-md-2">
                     <div> some test</div>
                </div>
                <li class="nav-item nav-icons">
                    <a  href="">
                        <span class="icon"> X </span>
                    </a>
                </li>
                <li class="nav-item nav-icons">
                    <a  href="">
                        <span class="icon"> V </span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

你忘了.在CSS课前.nav-link并设置position: absolute;来定位它...

参见小提琴：https://jsfiddle.net/3ah58br4/7/ https://jsfiddle.net/3ah58br4/7/ 

body{background-color:black!important;}
.nav-link:after {
    content: "|";
    position: absolute;
    top: 16px;
    margin-left: -10px;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-expand-sm navbar-dark bg-color">
        <div class="navbar-brand header-title">Title</div> <!-- this is in the middle -->
        <div class="navbar-collapse collapse" id="collapsingNavbar">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="navbar-brand" href="#">
                        <img src="logo.png" />
                    </a>
                </li>
            </ul>
<!-- Here between nav-item I would lik to add pipe speparator -->
            <ul class="navbar-nav ml-auto">
                <div class="nav-item nav-link mr-md-2">
                    <div> some test some test</div>
                </div>
                <div class="nav-item nav-link mr-md-2">
                     <div> some test</div>
                </div>
                <li class="nav-item nav-icons">
                    <a  href="">
                        <span class="icon"> X </span>
                    </a>
                </li>
                <li class="nav-item nav-icons">
                    <a  href="">
                        <span class="icon"> V </span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Bootstrap4

Bootstrap 4添加垂直分隔管 的相关文章

  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使

  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d

  • 滚动时我的身体背景颜色消失

    我希望有人能帮帮忙 我已将 body height 属性设置为 100 当所有内容同时显示在屏幕上时 这很好 然而 当我需要滚动 最小化窗口时 主体颜色消失 只留下我为 HTML 背景设置的颜色 有人知道解决办法吗 html backgro

  • 排除单个浏览器使用 CSS 类

    我想排除 Internet Explorer 使用特定的 CSS 类 这可能吗 Details 我有一个 css 类 看起来像 input type radio checked input type radio hover box shad

  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以

  • css 计数器在 Internet Explorer 中无法工作以获取隐藏内容 - 如何修复？

    我们想要一些编号列表 并发现了这个很酷的计数器 您可以在 css 中使用它来让浏览器为您计算数字 ol instructions counter reset instructions section ol instructions gt l

  • jquery：当我在文档上附加一层时，如何重置文档滚动条？

    当我在文档上附加图层时 如何重置文档滚动条 例如 它就像 Facebook 页面 当您有一个很长的文档时 您需要向下滚动才能查看较旧的图像 帖子 当你点击照片时 滚动条发生了变化 从顶部开始 但文档页面根本不跳转 当关闭照片查看器图层时 滚

  • span 和 iframe 正文中的宽度（以像素为单位）

    我需要知道 a 的宽度 nbsp 以像素为单位 以及是否取决于字体大小 另外 页面中不同元素的情况是否有所不同 还有 就是 nbsp 与常规不同 目的 nbsp 不间断空格 位于正常空格之上是为了防止单词之间出现换行 您可以使用多个 nbs

  • 每页都包含菜单

    假设我有一个简单的 CSS 布局 我的菜单是侧面的一列 此菜单将出现在每个网页上 大约 10 个网页 如果我在这个菜单上有链接等形式的项目 我怎样才能做到这样 如果我在一页上添加链接 它会将其添加到所有页面 你能把它做成一个 PHP 页面吗

  • CSS“内容”不起作用

    我想通过 CSS 添加该段落的文本 而不是在 HTML 中 因为它会随着网站的响应能力而变化 现在我无法让它工作 我想知道CSS是否有问题 另外 这是唯一可以做到的方法 使用纯 HTML 和 CSS 还是有另一种方法来定位文本并根据每个分辨

  • 在 Bootstrap 4 中创建水平表单

    我是初学者引导程序我正在使用 bootstrap 来设计表单 我正在尝试使用创建水平形式form horizontal引导类BUT标签和文本字段未显示在同一水平线上 我看过有关它的教程 并且我从该教程中复制了相同的代码 但它对我不起作用 而

  • 具有自定义设计的 ASP.NET 复选框

    有没有办法改变asp net复选框的ui样式 我试过这个 cabeceraCheckBoxNormal background url ig res Default images ig checkbox off gif no repeat c

  • 数据库中的 HTML 标签是不好的做法还是好的做法？

    有时我需要格式化来自数据库的特定数据或部分数据 例如 如果我有这样的 desc 存储在数据库中 HTML 4 经过调整 延伸和增强 超出了其最初的范围 为网站带来了高水平的交互性和多媒体 Flash Silverlight 和 Java 等

  • CSS：应用于类组合的样式？

    我不确定这是否可行 但是当您想根据应用于元素的类的组合来设置元素的样式时 是否可以在 CSS 中使用语法 我知道我可以使用 jQuery 或其他东西检查元素并根据它所具有的类更改它的样式 但是有没有一种纯 CSS 方法可以做到这一点 例如

  • 如何使用 javascript/ASP.NET/CSS 旋转和淡入淡出背景图像

    我需要随机淡入淡出背景图像 这将是一个定时函数 例如每 5 秒一次 我需要使用 ASP NET Javascript CSS 或全部三者来完成此操作 请大家帮帮我 谢谢 Cycle 一个 jQuery 插件 是一个非常灵活的图像旋转解决方案

  • 将 DIV 堆叠在一起？

    是否可以堆叠多个 DIV 例如 div div div div div div div div div div 那么所有这些内部 DIV 都具有相同的 X 和 Y 位置吗 默认情况下 它们都在彼此下方 将 Y 位置增加了上一个 DIV 的高

  • 如何防止 CSS 或 jQuery 中单词和标点符号之间的换行

    我在一个段落中有一些文字 我的问题是 当标点符号位于单词末尾时 有时可以换行到下一行 像这样 This is the text This is a new line 我可以用 CSS 或 jQuery 解决这个问题吗 如果您不在单词和标点符

  • data:image/png;base64 是什么意思？

    我从一个在线网站上举了一个例子 CSS 包含一个指向 png 的 URL 和一些随机字母 在这两种情况下 任何人都可以告诉我如何制作这样的代码 或者更确切地说 这些代码是关于什么的 这是html

  • 滚动视图上的固定按钮

    我目前正在尝试在屏幕右下角的滚动视图上显示一个按钮 但它不起作用 当我滚动视图时按钮会移动 我尝试先插入按钮 但滚动视图位于其上方 class HomePage extends Component loadUserItems this pr

随机推荐

  • 如何使用 Jquery 更改辅助样式表？

    我的网站上有我的 base css 和 red css 我喜欢在按下某个按钮时将 red css 更改为 blue css 而不丢失 base css 如何执行此操作 我试过这个

  • Dataframe 根据其他列创建新列

    我有一个数据框 df lt data frame a c 1 2 3 4 5 b c 1 20 3 4 50 df a b 1 1 1 2 2 20 3 3 3 4 4 4 5 5 50 我想根据现有列创建一个新列 像这样的事情 if df

  • for 语句后的大括号

    我是新手 编写一个代码来打印从 1 到 10 的数字之和 事情是这样的 for a 1 a lt 10 a sum a cout lt

  • excel函数“R中决策函数的搜索

    我有一个问题 R中是否可以实现excel函数 决策搜索 R中有没有函数或者需要在R中创建一个脚本 需要结合以下方程来求解X值得到 1 126 作为结果 1 126 X X 0 2 EXP X 0 2 1 您可以使用以下方法找到该方程的解un

  • .vimrc 控制键映射不起作用

    我的 vimrc 中有以下映射 用于映射控制键 1 2 3 用于切换选项卡 我在 ubuntu 11 10 中使用 gnome 终端 控制键映射似乎不起作用 谁能告诉我我做错了什么 VIM Vi 改进版 7 3 154 map

  • 如何在不关闭vim的情况下重置vim的设置（包括插件，.vimrc文件）？

    我已经使用 vim 两年了 我使用 pathogen 进行插件管理 我在寻找 一种在不关闭 vim 的情况下重置所有 vim 设置 包括插件 vimrc 文件 的方法 是 有什么想法吗 PS 在某些情况下 重新加载 vimrc 与重新打开

  • Android 在其他设备上共享显示

    我正在努力与通过 WiFi 连接的多个表 全部有根 共享平板电脑显示屏 我正在使用以下方法 全部在一个线程内 1 我截屏 Process sh Runtime getRuntime exec su null null OutputStrea

  • 涵盖 .NET 中的 TDD、DDD 和设计模式的书籍

    我想要一本能够真正让我全面了解使用 C TDD ASP NET MVC DDD 和设计模式 例如存储库模式 的现代 ASP NET 开发的书 我非常擅长 C 和 ASP NET MVC 但想填补空白 如果您对涵盖这些主题的一两本书有很好的体

  • 如何更改 graphviz 的默认字体大小？

    我使用 doxygen graphviz 来记录我的代码 graphviz 在生成图像方面做得很好 有什么方法可以更改 graphviz 的默认字体大小吗 默认值为 14 但我想使用 12 更改单个元素 例如节点 子图 边缘等 的字体大小确

  • 具有重复参数（可变参数）的磁铁模式

    是否可以使用磁铁图案 http spray io blog 2012 12 13 the magnet pattern 与可变参数 object Values implicit def fromInt x Int Values implic

  • getattr/setattr/hasattr/delattr 线程安全吗？

    看这个单例实现 if not hasattr Singleton instance with Singleton instance lock if not hasattr Singleton instance Singleton insta

  • Maven 父项目自动化

    我有这个结构 child C 家长 A child B 如果我尝试在没有父级的情况下安装子级 B maven 会抛出一个错误 我知道按照惯例我应该将父级安装在我的存储库中 但是有没有办法让某人拉取子级并在安装过程中安装自动父辈 编辑 我要尽

  • 链接器如何处理跨翻译单元的相同模板实例化？

    假设我有两个翻译单元 foo cpp void foo auto v std vector

  • ant、jar 文件和类路径哦天哪

    我正在尝试重新构建我的构建技术来创建依赖于常见的第 3 方 jar 文件的 Java jar 文件 GlazedLists Apache Commons 等 我一直将它们全部放入 Java JRE dir lib ext 中 这样 JRE

  • React-testing-library 未从样式表渲染计算样式

    基本场景是这样的 我有一个组件width 100 正如样式表中所定义的 因此它应该保留其父组件的宽度 我想计算组件的宽度并将其应用到我的子组件 因为我通过渲染它createPortal我希望它们的宽度相同 这在浏览器中有效 然而 在我的测试

  • 在 WebAPI 中的模型上使用可序列化属性

    我有以下场景 我正在使用 WebAPI 并根据模型将 JSON 结果返回给消费者 我现在有额外的要求 将模型序列化为 base64 以便能够将它们保存在缓存中和 或将它们用于审计目的 问题是当我添加 Serializable 属性到模型 因

  • 检查 Linq-to-xml 中结果是否存在

    我正在使用 Linq to XML 进行简单的 此用户是否已注册 检查 此处没有安全性 只是为桌面应用程序创建注册用户列表 如何处理这样的查询结果 var people from person in currentDoc Descendan

  • 将图像添加到 RichText 元素

    我正在努力实现以下目标 为了实现这一点 我使用富文本 使用它我可以添加多个具有不同样式的文本 但我不知道如何将图像添加到此文本范围 也许还有其他一些因素 您不需要第三方库来实现此目的 在最新的稳定版本中 Flutter 引入了WidgetS

  • Python 解包格式字符串的参数列表

    我有一个根据用户输入动态创建的格式字符串 我正在列表中收集格式字符串的参数 我想知道如何在格式字符串的末尾解压它们 我看到了一些似乎与此相关的问题 但我对 Python 很陌生 我似乎无法将他们的解决方案应用于我的案例 我想做的事情的想法是

  • Bootstrap 4添加垂直分隔管

    您好 我正在尝试在导航链接之间添加一些分隔符 但它不起作用 我尝试添加 nav link after content 但它不起作用或显示在左侧 这是我的代码

热门标签