程序员经验分享-hwhale

如何在 Bootstrap 4 中均匀分布导航栏元素

2024-03-24

为网站构建引导程序导航。

我在弄清楚如何最好地间隔导航栏上的导航链接元素时遇到了一些麻烦（并继续在移动设备上看起来不错）。

我的导航栏代码是：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul id="menu-main-nav" class="navbar-nav">
        <li id="menu-item-42" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-42"><a href="XXX" class="nav-link">HOME</a></li>
        <li id="menu-item-963" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-963"><a href="XXX" class="nav-link">SERVICES</a></li>
        <li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">ABOUT US</a></li>
        <li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

我目前有四个导航元素。我首先想到将 width=25% 添加到 nav-link 类中。但认为这会给移动视图带来问题。

另外，如果我最终在导航栏中有第五个项目（从 WordPress 外观 > 菜单添加），我该如何使我的代码适应它呢？


Use the .nav-fill使物品的间距相等，并且w-100(宽度:100%) 类使其全宽...

https://www.codeply.com/go/djlHAC3uux https://www.codeply.com/go/djlHAC3uux

<ul id="menu-main-nav" class="navbar-nav nav-fill w-100">
     <li id="menu-item-42" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-42"><a href="XXX" class="nav-link">HOME</a></li>
     <li id="menu-item-963" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-963"><a href="XXX" class="nav-link">SERVICES</a></li>
     <li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">ABOUT US</a></li>
     <li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">CONTACT</a></li>
</ul>

http://getbootstrap.com/docs/4.0/utilities/sizing/ http://getbootstrap.com/docs/4.0/utilities/sizing/

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

css

WordPress

twitterbootstrap

Bootstrap4

如何在 Bootstrap 4 中均匀分布导航栏元素 的相关文章

  • 删除 woocommerce 店面主页标题 php

    我正在使用 woocommerce 的店面主题 我需要用 php 删除主页标题 h1 我知道 css 解决方案 但我不想使用它 因为我想将 h1 添加到该页面的其他位置 并且在一个页面中包含 2 个 h1 对 seo 不利页 我也知道删除页

  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale

  • 使用 CSS 网格布局使网格项内的元素高度相等

    我在长度超过 4 的 div 中有一系列文章 没有任何舍入行标签 我需要将其表示为每行 3 篇文章 列 的表格 可能包含display grid 每篇文章都有页眉 章节和页脚 如何在每行文章内实现每个标题的等高 每个部分的等高以及与文章底部

  • 如何删除标题中的粗体？

    我有一个标题 h1 THIS IS A HEADLINE h1 如何使短语 THIS IS 不加粗 其余部分不做任何更改 我在文本装饰中找不到任何相关标签 标题看起来很粗体 因为它大尺寸 如果您已应用粗体或想要更改行为 您可以执行以下操作

  • 如何简化这个 LESS CSS Box-shadow mixin？ （带有“方向”的多个阴影）

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir

  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工

  • 为什么使用 iPhone 或 iOS 设备在“iframe”中查看“position:fixed”时不起作用？

    我研究过 stackoverflow 似乎position fixed在 iOS 移动设备的 iframe 中 https stackoverflow com questions 15874910 position fixed and if

  • Quill 公开可用的 CSS

    我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件 而该组件又基于 免费开源 WYSIWYG 编辑器 Quill 为此 我需要获取 TextEditor 组件生成的 HTML 将其包含在

  • 使用“表单控件”删除输入字段的轮廓

    我有一个输入字段 如下所示 在类名中我将其作为form control

  • chrome 中选择选项元素的额外填充

    我有一个选择元素 用户可以在其中选择分类和描述 仅在 Chrome 浏览器中 我有一个额外的填充 无法使用 padding 0 或其他 css 标签删除它 Chrome 的屏幕 https i stack imgur com m3iIb p

  • 从字体到跨度（大小和颜色）和背面的正则表达式（VB.NET）

    我正在寻找一个正则表达式 可以将我的字体标签 仅具有大小和颜色属性 转换为具有相关内联CSS的span标签 如果有帮助的话 这将在 VB NET 中完成 我还需要一个正则表达式来实现相反的效果 下面详细说明的是我正在寻找的转换示例 font

  • Gmail 无法在电子邮件上正确呈现字体

    我已经建立了一个 html 电子邮件并使用了 Google 字体 我已使用以下方法将字体包含在 head 标签中 if mso endif 并使用字体 即我这样做了

  • TDD/测试 CSS 和 HTML？ [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 有没有办法测试 CSS 和 HTML 例如 有时某些通知会受到某些 CSS 更改的影响 我不想每次进行更改时都手动测试所有通知 Tha

  • iPad - 无法在框架内滚动

    我无法滚动 iPad Safari 中框架内调用的 pdf 我已经尝试过两件事 2 指滚动 使用对象 嵌入代替框架 但这是行不通的 事实上我已经尝试了很多东西 溢出 高度等等 请帮我 先感谢您 根据这篇文章http support appl

  • 闪亮的应用程序包：css 和所有 www/ 目录内容

    我正在尝试将 Shiny 应用程序转换为 R 包 但我在处理有关 www 目录以及 松散 文件的所有问题时遇到了问题 我闪亮的应用程序运行得很好 但是当我尝试 打包它 时 它不起作用 我闪亮的应用程序目录 my shiny app R ut

  • 使用 :hover 作为元素的内联样式（使用 HTML/CSS/php）[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i

  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div

  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div

  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms

  • 禁用 WooCommerce 手动/编辑订单的电子邮件通知

    需要 WooCommerce 专业知识 我需要禁用手动创建的订单的电子邮件通知 我必须使用处理状态 由于处理订单状态的自定义挂钩 我无法创建自定义状态 理想情况下 手动订单页面中可以勾选一个复选框 勾选后 它将禁止在每种状态下向客户发送电子

随机推荐

  • 为什么最好的做法是用括号将分配给变量的 JSX 括起来？

    在下面的示例中 x 和 y 的输出相同 我见过两种方式编写的 React 代码 有区别吗 由于我看到的许多 React 代码示例都使用括号语法 我认为这是有原因的 如果这是最佳实践 那么为什么用括号将分配给变量的 JSX 括起来是最佳实践

  • 如何存储大量数据？

    我必须 在状态机上 制作 RSA 签名C在 32 位板上 我的内存有限 所以我无法将小数存储在向量或类似的东西中 最好的事情是如果我可以存储位并且可以轻松访问它们 什么存储方法最好 我做了这个 if CPU TYPE CPU TYPE 32

  • 通过 PHP 的 JS 解包器 - 函数(p,a,c,k,e,r)

    我在互联网上搜索但到目前为止没有找到解决方案 我必须抓取用以下内容压缩的页面 具有视频流 的内容Dean Edwards 封隔器工具 http dean edwards name packer 实时 因此 我只需要通过 PHP 来解码压缩的

  • 通过 Java 执行 ADS 相关的 Powershell 命令不起作用，使用 2 种不同的方式时会出现 2 种不同的错误

    我一直在尝试通过 java 在 powershell 会话中执行一组命令 但还没有成功 我的目标是在 AD 中搜索域为 domain com 的计算机对象 我从一个命令开始 不幸的是 以下命令在我的 powershell 提示符下成功运行

  • 图像不显示在 jar 中但显示在编译器中？

    我知道 我知道 这个问题以前有人问过 但我看过的每个资源都使用 IconImages 而我只有普通图像 有不同的解决方案吗 请帮助 因为我已经坚持研究并试图解决这个问题好几天了 但没有任何进展 Image Floor Toolkit get

  • 何时使用块

    我喜欢红宝石块 它们背后的想法非常非常简洁和方便 我刚刚回顾了过去一周左右的代码 基本上是我写过的每一个 ruby 函数 而且我注意到它们中没有一个返回值 我总是使用块来传回数据 而不是返回值 我什至发现自己正在考虑编写一个小状态类 这将允

  • 如何在ubuntu 15.04中安装poppler？

    Poppler 是一个基于 xpdf 3 0 代码库的 PDF 渲染库 我已经从官方网站下载了 tar xz 文件http poppler freedesktop org http poppler freedesktop org 但我不知道

  • 从另一个范围中的值定义一个范围

    我有一个 Excel 文件 其中包含已完成或未完成的任务 并在列中用 是 或 否 表示 最终 我对不同列中的数据感兴趣 但我想设置代码 以便它忽略任务已完成的那些行 到目前为止 我已经定义了包含是 否的列范围 但我不知道在此范围上运行哪个命

  • C# 中的通用 Func<> 类型

    我正在用 C 编写一个小型 Lisp 解释器 它基本上已经可以工作了 目前我正在使用一个接口来表示函数 public interface LispFunction object Apply ArrayList parameters 该接口由

  • 如何在 pygame 中有效地遮盖表面

    我按照建议掩盖 pygame 中的表面nkorth https stackoverflow com users 685933 nkorth回答问题有没有办法只在掩码中进行位块传输或更新 https stackoverflow com a 1

  • 我什么时候应该使用 stdClass，什么时候应该在 php oo 代码中使用数组？

    在工作中的大规模重构期间 我希望引入 stdClass 作为从函数返回数据的一种方式 并且我正在尝试找到非主观论据来支持我的决定 在什么情况下最好使用其中一种而不是另一种 使用 stdClass 而不是数组有什么好处 有人会说函数必须尽可能

  • 降低滚动视图中平滑滚动的速度[重复]

    这个问题在这里已经有答案了 我有一个滚动视图 我执行 smooth scroll using smoothScrollBy 一切正常 但我想更改平滑滚动的持续时间 平滑滚动发生得非常快 用户不明白发生了什么 请帮助我降低平滑滚动速度 简单的

  • 通过蓝牙打印机 Android 打印 Pdf 文件

    在我的项目中需要通过蓝牙打印机打印Pdf文件 我写了一个代码通过pdf打印 它对于文本来说很好 但我想在蓝牙打印机上打印PDF文件 我的打印文本的java代码 Override public void onCreate Bundle sav

  • 如果类包含基类的成员，编译器可以利用空基优化吗？

    Consider struct base struct child base 众所周知sizeof child 可以通过应用 1空碱基优化 然而现在 考虑一下 struct base struct child base base b 编译器

  • 在jqgrid的列中添加图像

    我想在 jqgrid 的第一列中显示一个小图像 以显示从数据库获取的所有数据 jquery tableName jqgrid colNames colModel width 25 name someValue index somevalue

  • 访问数组数组内数组的行？

    说我有 H array a array b array c a 1 2 3 4 5 6 11 22 33 44 55 66 row 1 of H 0 111 222 333 444 555 666 b 7 8 9 0 1 2 77 88 9

  • 限制 JTextField 中输入的长度不起作用

    我试图限制用户可以在文本字段中输入的字符的最大长度 但它似乎不起作用 这是代码 text2 new JTextField Enter text here 8 我做错了什么吗 如何才能使限制正常工作 您当前的代码没有设置最大长度 而是定义可见

  • BroadcastReceiver 与 WakefulBroadcastReceiver

    有人可以解释一下两者之间的确切区别是什么BroadcastReceiver https developer android com reference android content BroadcastReceiver html and W

  • WPF - 如何在任一时间仅扩展一个扩展器

    我有一个带有一组扩展器的 StackPanel 如何设置它以便在任何时候都只扩展扩展器 Cheers AW 我真的不想这样做 因为它需要将代码 C 放在窗口文件后面的类中 我试图通过使用 ViewModels 等来完全避免这种情况 理想情况

  • 如何在 Bootstrap 4 中均匀分布导航栏元素

    为网站构建引导程序导航 我在弄清楚如何最好地间隔导航栏上的导航链接元素时遇到了一些麻烦 并继续在移动设备上看起来不错 我的导航栏代码是

热门标签