Twitter Bootstrap:将导航选项卡与 div 底部对齐

2023-12-08

我正在建立一个网站,这是我第一次使用 Twitter 引导程序。

我正在尝试将菜单与 div 底部对齐。 但由于某种原因我不知道该怎么做。

我做了一些研究并尝试使用 box-align 属性。 但这没有用。

这是我的代码:

<div class="row">
<div class="col-md-4">
            <img class="img-responsive" src="img/logo.png" >
       </div>

       <div class="col-md-8">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home" style="color:#6d92a2"></span> Home</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-check" style="color:#6d92a2"></span> Missie en Visie</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-calendar" style="color:#6d92a2"></span> Activiteiten</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-user" style="color:#6d92a2"></span> Lidmaatschap</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-play-circle" style="color:#6d92a2"></span> Videozone</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-map-marker" style="color:#6d92a2"></span> Contact</a></li>
       </ul>

       </div> <!-- nav tabs -->

    </div> <!-- row -->

有什么建议吗?

编辑:看来我没有充分说明我的问题,我的错。我目前没有使用 CDN,菜单本身不会出现任何问题。正如您在: link 中看到的,导航位于 div 的顶部,但我希望它与 div 的底部对齐。


您必须为父元素指定特定的高度。我建议通过添加一个额外的类来做到这一点,例如extraClass,给你的<div class="col-md-8">像这样:

<div class="row">
<div class="col-md-4">
        <img class="img-responsive" src="img/logo.png" >
   </div>

   <div class="col-md-8 extraClass">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home" style="color:#6d92a2"></span> Home</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-check" style="color:#6d92a2"></span> Missie en Visie</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-calendar" style="color:#6d92a2"></span> Activiteiten</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user" style="color:#6d92a2"></span> Lidmaatschap</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-play-circle" style="color:#6d92a2"></span> Videozone</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-map-marker" style="color:#6d92a2"></span> Contact</a></li>
   </ul>

   </div> <!-- nav tabs -->

</div> <!-- row -->

并使用这个CSS:

.extraClass {
    height: 122px; 
    position: relative;
}

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

Twitter Bootstrap:将导航选项卡与 div 底部对齐 的相关文章

  • 如何格式化 html/css/js/php 中的代码

    我正在寻找一种方法来自动设置我在 HTML 文档中编写的代码的格式和颜色 我知道维基百科是这样做的 例如在页面上 http en wikipedia org wiki Nested function http en wikipedia or
  • 如何按排序顺序显示<选择>

    我怎样才能排序
  • 填充重叠的圆形区域

    我有两个相交的圆 我想让相交区域具有颜色 即使这两个圆是透明的 我想我可以找到一些方法用 css 来做到这一点mix blend mode财产 但我没有成功 当然 我可以使圆圈具有颜色并降低其不透明度 但我希望它们是白色或透明的 其中只有重
  • 在表单中突出显示选定的图像 - 使用 Jquery?

    我在谷歌上搜索了答案 但发现什么也没有 所以即使是一个显示如何执行以下操作的页面的链接也将不胜感激 基本上我有一个只有图像的表格
  • 使用普通的旧 JS 动态渲染 DOM 元素的好方法是什么?

    我面临的挑战是使用普通的旧 Javascript 构建一个单页应用程序 不允许使用任何库或框架 虽然在 React 和 Angular 中创建动态 DOM 元素相当简单 但我提出的普通 JS 解决方案似乎很笨重 我想知道是否有一种特别更简洁
  • 使 Knockout applyBindings 将选择选项视为数字

    我将 Knockout 与 html select option 结合使用 请参阅Fiddle http jsfiddle net hf5gb
  • 如何为 p 标签中的星号第一个字符着色

    我认为这会很容易使用 first letter伪元素 但它不起作用 I have p Required Fields p 我希望 是红色的 有任何想法吗 请注意 我无法更改 html http jsfiddle net 3ducS http
  • 图表外的 JQPlot 图例

    我正在使用 JQPlot 并且在一个 HTML 页面上有很多图表 每个图表都有相同的图例 我的问题是 是否可以完全在图表之外显示图例 并在 HTML 页面或自己的 div 中拥有自己的位置 legend show true renderer
  • 如何在 HTML 链接中使用 JavaScript 变量

    我正在开发的网站有一个标签指向与网站所具有的 URL 不同的 URL 我想做的是绕过使用下面的 trueURL 标记来查找网页的网址 因为我需要它来构造一些内部锚点 因为我需要网站的实际网址 以便内部锚点正常工作 我遇到的问题是我不知道应该
  • 如何消除页面边缘的间隙?

    我已经将主体和两个 div 的边框 内边距和边距设置为 0px 但我似乎仍然无法摆脱差距 body padding 0px border 0px margin 0px width 100 height 100vh mainPage heig
  • 有没有办法强制浏览器刷新/下载图像?

    我遇到一个问题 用户报告他们的图像没有上传 而旧图像仍然存在 仔细检查后 新图像就在那里 它们只是与旧图像具有相同的名称 我在上传时所做的是出于搜索引擎优化的目的重命名图像 当他们删除图像时 旧索引变得可用并被重用 因此它具有相同的图像名称
  • 嵌套最小高度不起作用

    我有一个固定大小的绝对定位区域 其中滚动条包含可变大小的内容 现在我需要将内容包装在两个 div 中 这两个 div 至少与区域一样大 但会扩展以适合内容 div div div div content div div div div 要求
  • 从右到左打印表格单元格

    我制作了一个表格 并希望第一个单元格从右侧开始 而不是默认从左侧开始 我尝试更改 CSS 中的 float 属性 但似乎没有帮助 这是代码 table border 0 width 100 cellspacing 0 align cente
  • 如何在 difflibs html 输出中突出显示每行超过两个字符

    我在用difflib HtmlDiff比较两个文件 我希望在输出的 html 中突出显示差异 当一行中最多有两个不同的字符时 这已经有效 a 2 000 b 2 120 但是 当一行上有更多不同的字符时 在输出中整行将被标记为红色 在左侧
  • 同时使用高度和最小高度,并且均以百分比形式表示

    有没有办法根据CSS中的百分比设置最小高度 当我同时使用高度和最小高度时 我不能同时使用百分比我正在寻找一种控制最小高度的方法 因为我的内容基于百分比并且它的高度发生了变化 我无法将高度设置为自动 因为我需要高度为 100 而最小高度也基于
  • 使用标签强制关闭 IE 兼容模式

    我正在为一个在所有 Intranet 站点上强制使用兼容模式的客户工作 我想知道是否可以在 HTML 中放入一个标签来强制关闭兼容模式 有 边缘 模式 http msdn microsoft com en en library cc8175
  • 删除多个类 (jQuery)

    有没有更好的方法来重写这个 element removeClass class1 removeClass class2 我无法使用removeClass 因为它会删除我不想要的所有课程 element removeClass class1
  • Google Chrome 不想使用 mediaelement.js 播放 mp4

    我在我的网站上使用最新的 mediaelement js 来播放 html5 视频 Google Chrome 中有一些奇怪的东西 他播放一个视频 但不想以 mp4 格式播放另一个视频 并且不会回退到 webm 两个视频均使用 ffmpeg
  • 缩放父元素但删除子元素的缩放

    我目前正在使用一些CSS动画scale 有没有办法限制子元素不缩放而只有父元素会缩放 scale max width 200px height 200px background color beige webkit transition t
  • 错误:Phonegap 中的白名单拒绝

    我是移动开发新手 我正在使用 Phonegap Cordova 创建跨平台应用程序 我的代码在 Android 上运行良好 但当我将其移植到 iPhone 时 它 显示错误 143 2003 ERROR whitelist rejectio

随机推荐

  • 如何在 XSL 中用空格替换逗号

    我需要在 XML 输出中将所有其他逗号替换为空格 现在 我的纬度和经度如下所示 0 52437106918239 0 391509433962264 0 533805031446541 0 430817610062893 0 0 54795
  • 使用 PackageManager 不会在 Android 11 上填充应用列表

    我正在使用包管理器来获取启动器中应用程序抽屉界面的应用程序列表 一切正常 但在 Android 11 上 唯一显示的应用程序是 Android 设置应用程序 是什么改变了它不再工作和 或我应该做什么才能使它工作 应用程序列表现在基于用户配置
  • 从 pandas DataFrame 中的日期时间列中提取月份

    我有一个从 Excel 读取的 DataFrame 其中包含 DateTime 类型的列之一 sales data pandas read excel r Sample Sales Data xlsx 我能够使用 str extract l
  • 将列向量转换为 R 中矩阵的对角线?

    我在 R 中有一个具有以下格式的列向量 num 1 2464 1 我想对向量进行对角线排列 因此每个元素都位于矩阵的对角线中 我尝试过以下代码 diagvector lt diag myvector 但随后它只显示第一个数字 我想我只能使用
  • 使用不同节点运行 SKActions 序列

    我知道我可以创建一个 SKAction sequence 它将一一运行一个节点的操作 但是 如果我想用不同的节点执行序列 我该怎么做呢 我想做这样的事情 从节点 A 运行操作 等待 2 秒 从节点 B 运行操作 如果两个节点的名称是唯一的并
  • DestroyWindow 不会使用 Python 和 OpenCV 关闭 Mac 上的窗口

    我的程序使用以下代码生成一系列窗口 def display img name fun global clicked cv NamedWindow name 1 cv ShowImage name img cv SetMouseCallbac
  • z3 对于没有量词的断言生成未知

    我有一些简单的约束 涉及 z3 中实数的乘法 这些约束产生unknown 问题似乎是它们被包装在数据类型中 因为未包装的版本会产生sat 这是一个简化的情况 declare datatypes T NUM n Real declare co
  • 限制可以上传的文件数量

    如何限制可以上传的文件数量 The max验证似乎适用于图像的大小 以千字节为单位 如何验证允许上传的最大文件数 例如 单个输入只能上传 10 个文件 我在 Laravel 7 x 中的表现如何 使用以下命令创建一个新的表单请求类 php
  • 需要替代的 Python 列表反向解决方案

    我今天参加了一个工作面试 在此期间 我被要求写下一个反转列表的算法 首先我使用reverse 方法提供了答案 x 1 2 3 4 5 y reversed x for i in y print i 进行面试的高级开发人员问我是否知道另一种方
  • 如何在 C# 中以编程方式将 xlsx 文件转换为 2003 xls 文件?

    我找到了Excel包 一个比 Excel Interop API 更好的库 用于以编程方式创建和维护 Excel 工作表 但它们是在 xlsx 中生成的 大多数看到这些文件的人只安装了 Office 2003 因此我需要在我的 C 代码中将
  • 如何将“Mon Jun 18 00:00:00 IST 2012”转换为 18/06/2012?

    我有一个像下面这样的值Mon Jun 18 00 00 00 IST 2012我想将其转换为18 06 2012 如何转换这个 我尝试过这个方法 public String toDate Date date SimpleDateFormat
  • 上传到 FTP 时保留图像创建日期

    因此 我正在为我的家人制作一个网站 我们可以在其中上传图像并查看它们 但该网站的一个重要功能是按日期排序 以便例如我的阿姨在我母亲的生日时拍了照片 而我也有拍摄照片 我们上传图像 它们将添加到同一相册等 我意识到通过浏览器上传时无法保留日期
  • jqGrid - 在网格中不提供数据消息?

    如果当前搜索没有返回数据 我们将使用loadComplete回调向用户打印一条消息 表明没有数据 有没有办法配置 jqGrid 以在网格内打印出 无数据 消息 目前我们将其打印在div在网格上方 但希望它位于实际网格内 jqGrid 显示
  • Apache AGE-如何实现两个图之间的关系

    如果我们有 2 个图数据库 A 和 B 并且当前节点 A 图数据库和 B 图数据库之间没有关系 现在我必须在 A 节点和 B 节点之间添加关系 那么如何我使用 AGE 来做到这一点 例如 A 可以是员工图数据库 B 可以是任何汽车经销商图数
  • 按词汇顺序查找总和为给定数字的千组

    较大的数字可以采用逗号格式 以便更容易地分为三个一组 例如 1050 1 050 and 10200 10 200 每三组的总和为 1050 1 050 gives 1 50 51 10200 10 200 gives 10 200 210
  • 创建像 TextLine 这样的 Scalding Source,将多个文件组合到单个映射器中

    我们有许多小文件需要合并 在烫伤中你可以使用TextLine将文件作为文本行读取 问题是我们有 1 个映射器per file 但我们想要合并多个文件 以便它们由 1 个映射器处理 我知道我们需要将输入格式更改为实现CombineFileIn
  • 使用 Dropwizard 0.7.0 实现长轮询服务器

    我正在尝试使用 Dropwizard 0 7 0 框架实现长轮询服务器 有人建议我使用码头集成 经过一番谷歌搜索后 我对 websockets jetty continuation cometd 之类的东西感到非常困惑 我的问题是 这些东西
  • 从 URL 打开 PDF

    我是android开发的新手 我必须显示来自 URL 的 PDF 这是我当前的代码 但我无法显示 PDF 文件 public class TestActivity extends Activity public void onCreate
  • 查询查找所有非零毫秒的文档

    有大量的收藏transaction文档 2M Each transaction文档有一个source billDate field source billDate ISODate 2018 07 23T16 02 06 797Z or so
  • Twitter Bootstrap:将导航选项卡与 div 底部对齐

    我正在建立一个网站 这是我第一次使用 Twitter 引导程序 我正在尝试将菜单与 div 底部对齐 但由于某种原因我不知道该怎么做 我做了一些研究并尝试使用 box align 属性 但这没有用 这是我的代码 div class row