Bootstrap 导航栏宽度与容器相同

2023-12-03

我正在使用 Bootstrap 3 。我不能让导航栏与容器具有相同的宽度。如果它适用于大屏幕但不适用于其他屏幕尺寸。我如何制作固定大小的导航栏,它将改变与容器宽度相同的不同屏幕。

<div class="row"><!--Start row-->
     <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
                <div class="navbar-header"><!-- -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="glyphicon glyphicon-arrow-down">Menu</span>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Course List</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div><!--End Collapse-->
         </div>
     </nav><!--End Navbar-->
</div>

我对此的解决方法是简单地将container类中的<nav class="...">这将限制您的中殿栏的宽度由container属性。

代码如下:

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
         <div class="container-fluid">
                <div class="navbar-header"><!-- -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="glyphicon glyphicon-arrow-down">Menu</span>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Course List</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div><!--End Collapse-->
         </div>
     </nav>

也没有必要为<nav>被包裹在<div class="row">我希望这就是您正在寻找的。

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

Bootstrap 导航栏宽度与容器相同 的相关文章

  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her
  • 按百分比设置 bootstrap 模态身高

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

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗
  • 您如何看待引导模式触发器的相应回调?

    On 引导模态 http getbootstrap com javascript modals 我们知道我们可以为触发器绑定事件 例如show or hide using show shown hide hidden 但此事件绑定仅适用于一
  • php laravel Blade 模板不渲染

    我正在尝试使用 Laravel 和 twitter bootstrap 设置一个基本页面 我安装了 Laravel 并获得了通用的 你在这里 或 w e 图像 这样看起来很闪亮 对于 twitter bootstrap 我在 public
  • 在跨开口的 Bootstrap 弹出窗口中保留复选框

    我在引导弹出窗口内有复选框 我将其用作表单的一部分 当用户打开弹出窗口 选择一些复选框 关闭弹出窗口 然后重新打开弹出窗口时 我遇到问题 新打开的弹出窗口不会显示用户上次打开弹出窗口时选中的框 我需要用户的选择在弹出窗口启动时保持不变 我猜
  • 如何检查 bootstrap-4 模式是否已经打开?

    我想检查某个模式是否已经打开 我已经尝试过这种方法 bootstrap 4 但对我不起作用 即使对话框打开 也总是给出 false myModal is visible myModal data bs modal isShown myMod
  • 停止引导程序轮播在幻灯片末尾循环

    我想要这样 当我按下轮播上的下一个按钮时 如果它已到达幻灯片的末尾 则不要绕回并返回到第一张幻灯片 Bootstrap 3 有没有简单的方法可以做到这一点 设置wrap选项为 false 会使轮播自动停止循环 myCarousel caro
  • 什么是 NPM?为什么需要它? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 以前 我用记事本制作了一些网站 所以我们必须创建一个文件夹 TREE 并在其中放入一个 htm 文件 以及一些文件夹 其中包含 Jav
  • Bootstrap 3 RC 1 准备好投入生产了吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我今天要开始一个巨大的项目 我选择 Zurb 基金会是因为他们 非常 良好的移动优先策略 当我几个月前开始四处寻找时 Bootstrap 3 还
  • 强制在 Bootstrap 4 中显示无效反馈

    假设我有这样的 HTML div class form group div class form check div div
  • Bootstrap 3轮播淡入新幻灯片而不是滑动到新幻灯片

    我正在使用 Bootstrap 3 未修改 Here s div class carousel slide ol class carousel indicators li class active li li li ol div class
  • 如何在 Bootstrap v4 中实现导航栏下拉悬停?

    我对新的 bootstrap 版本有点困惑 因为他们将下拉菜单更改为 div
  • 关闭模态后清除模态字段

    我有这个模式
  • 引导程序无法正常工作的动态下拉菜单

    我已经使用 bootstrap 一段时间了 在尝试动态添加下拉菜单时遇到了一个问题 这是我的 JavaScript document ready function clickHere click function appendHere ht
  • 如何使用固定宽度的卡片制作卡片组?

    我想做一个响应式的卡牌 https getbootstrap com docs 4 0 components card card decks使用引导4固定宽度卡片 https getbootstrap com docs 4 0 compon
  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage
  • 设置引导工具提示上的箭头样式[重复]

    这个问题在这里已经有答案了 我正在尝试使用以下方式设置工具提示样式 tooltip inner 但我遇到了麻烦 因为我找不到如何设置工具提示小箭头的样式 如屏幕截图所示 工具提示的箭头是黑色的 我想在其上添加新颜色 any suggesti
  • bootstrap3 缩略图网格

    I find a tutorial about bootstrap grid but it was written in bootstrap1 x Now I want to use bootstrap3 to achieve the sa

随机推荐

  • PairGrid 与 Seaborn 中的 Hexbin 绘图

    我正在尝试在 Seaborn 网格中获取 hexbin 图 我有以下代码 Works in Jupyter with Python 2 Kernel matplotlib inline import seaborn as sns impor
  • 将图像图标从触摸位置动画到右上角?

    我正在开发 Android 在线购物应用程序 我必须应用一些动画 购物车图像显示在屏幕的右上角 屏幕上的项目列表中的每个项目都带有 添加到购物车 按钮 当用户按下此按钮时 我必须播放动画 我有一个固定图像 它应该从触摸位置动画到 购物车图像
  • 将 Jetty 8 升级到 Jetty 9

    我正在从 jetty 8 升级到 jetty 9 并且遇到了一些 API 中编译失败的问题 SslSelectChannelConnector 已被删除 从我可以看到 httpConfiguration 和 secureRequestCus
  • iText:单元格中的图像列表

    我想创建一个包含点列表的表格 我事先不知道我有多少个点 但如果它们溢出单元格 我希望它们换行 就像文本一样 我的代码是这样的 PdfPTable table new PdfPTable 1 table setTotalWidth new f
  • UIColor CMYK 和 Lab 值

    简单的问题 很可能复杂的答案 如何从 UIColor 对象获取 CMYK 和 Lab 值 如果有帮助的话 我知道其中的 RGB 值 我发现了有关获取 CMYK 值的信息 但我无法从中获取任何准确的值 尽管它无处不在 但我听说这不是一个很好的
  • Spring-Boot:如何设置 JDBC 池属性,例如最大连接数?

    Spring Boot 是一个非常棒的工具 但是当涉及到更高级的配置时 文档有点稀疏 如何设置数据库连接池的最大大小等属性 Spring Boot 支持tomcat jdbc HikariCP and Commons DBCP它们本身的配置
  • 解析 Powershell 变量

    你们都给了我很大的帮助 让我首先这么说 我从运行的函数中得到以下输出 数据存储在名为的变量中 response 从一个获得Invoke RestMethod call ResourceType UserStory Id 202847 Nam
  • 580001 无效请求:{0} PayPal (PHP)

    我从此页面发送用户名和密码 https www paypal com us cgi bin webscr cmd profile api signature AppId 是我在 Android 应用程序中用于创建付款的 ID https a
  • 如何让该 HTML 显示格式化且不带标签?

    我创建了一个博客 用于编码练习 我使用富文本编辑器 ckeditor 并将帖子保存到数据库中 当我将帖子拉出以显示在 Label Text 中时 它会显示所有 HTML 标签 p strong there was strong once a
  • 从代码运行 PsExec 进程的问题

    尝试使用 PsExec 远程运行 NET 命令行工具时 我遇到了一个奇怪的问题 从命令行运行 PsExec 时 它可以正常运行并完成 从控制台应用程序运行它时 创建进程 运行 PsExec exe 并为其提供必要的参数 它是 运行正常 当从
  • 如何从 statsmodels 中 WLS 回归的 2D 参数获取测试预测

    我正在逐步提高参数WLS 回归函数使用统计模型 我有一个 10x3 数据集 X 我声明如下 X np array 1 2 3 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 1 2 3 4 5 6 4 5 6 1 2 3 这是我
  • Azure 网站上的自定义域名正常工作,但总是重定向到 azurewebsites.net?

    我在共享模式 Azure 站点上设置了一个自定义域 其中 CNAME 为 www lakestarlodge com A 记录为 Lakestarlodge com 两者都有效 我可以在浏览器中输入其中之一并访问该网站 然而 我刚刚注意到
  • 单日历日期范围选择器

    我正在寻找构建一个日期范围选择器 其值一次仅包含一年的一月至十二月 它看起来像这样 这是从我现有的剑道日期范围选择器中获取的 并且经过了糟糕的Photoshop处理 我使用剑道日期选择器构建了一个日历 但它似乎需要两个日历 一个用于开始日期
  • 如何用 C# 创建自己的事件?

    如何用 C 创建自己的事件 以下是使用 C 创建和使用事件的示例 using System namespace Event Example First we have to define a delegate that acts as a
  • 查找可以用 1 和 0 书写的数字的倍数

    给定数字n 2 10 3 gt 111 4 gt 100 7 gt 1001 11 gt 11 9 gt 111 111 111 我的想法不太好 n 2 和 n 5 000 幻影的最大值 2 5 gt n 3 111 我认为 剩下的数字除法
  • 检查失败:mdb_status == 0 (2 vs. 0) 没有这样的文件或目录

    我在训练数据时收到以下错误 我已经尝试了互联网上给出的所有解决方案 但似乎没有一个对我有用 我已检查 lmdb 文件的路径和大小不为零 但问题仍然存在 我不知道如何解决这个问题 pooling I0411 12 42 53 114141 2
  • 根据窗口大小调整页面元素的大小

    Problem 我的客户希望我为他的产品创建一个启动网页 以便页面上不应该有滚动 任何浏览器或窗口尺寸 Doubt 使用 CSS 和 JavaScript 可以实现这一点吗 一些早期诊断 这可能有点类似于this or this但不同之处在
  • Xamarin.Auth Google 登录完成后不会自动关闭

    我跟随导游在此输入链接描述 当我登录我的谷歌帐户时遇到问题 它显示 toast 并且浏览器不会自动关闭以支持我的 Thanks 在您的 CustomUrlSchemeInterceptorActivity 页面中替换 OnCreate 内
  • 保存多帧 TIFF

    我从 C 应用程序中的 Stream 加载多帧 TIFF 然后使用 Image Save 方法保存它 但是 这仅保存第一帧的 TIFF 如何让它保存多帧 tiff 由于您没有提供任何详细信息 仅提供一些一般提示 多帧 TIFF 是非常复杂的
  • Bootstrap 导航栏宽度与容器相同

    我正在使用 Bootstrap 3 我不能让导航栏与容器具有相同的宽度 如果它适用于大屏幕但不适用于其他屏幕尺寸 我如何制作固定大小的导航栏 它将改变与容器宽度相同的不同屏幕 div class row div