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 底部对齐 的相关文章

  • 更改元素的顺序

    我正在创建一个浮动宽度的网站 用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕 这似乎是一个不错的主意 这就带来了一个非常有趣的问题 当用户使用比最佳分辨率更小的分辨率时 页面的高度会增加很多 这意味着更改某些元素 例如某些图像
  • jQuery:离线后 POST 出错(iOS 和 Chrome)

    我构建了一个具有离线功能的 HTML5 Web 应用程序 使用 AppCache 程序流程为 Online 在网络上时 应用程序预加载一些基本信息 工作 Offline 用户拿着装有应用程序的平板电脑offline 然后在应用程序上执行他们
  • 来自 HTML5 的 Phonegap Bonjour/Zeroconf 或 Websocket IP 发现

    我正在尝试实现一个 Phonegap HTML5 应用程序 该应用程序连接到 Websocket 服务器 在嵌入式设备中运行 也有 Bonjour 服务 以在家庭网络内交换数据 我想知道使用 Phonegap 检测服务器 IP 的最佳方法
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 如何在有序列表中组合数字和字母?

    如何在 CSS 中用数字和字母递增有序列表 ol nested margin bottom 0 counter reset item ol nested li display block position relative ol neste
  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 如何在codeigniter中将上传图片比例限制为16:9?

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设

随机推荐

  • 如何在 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