bootstrap css,如何在容器内制作全宽div

2024-03-18

我想用引导框架制作这种布局:

    |   | menu       x |    |
    -------------------------
    ** **  full width  ** **
    -------------------------
    |   | site content |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    -------------------------

我想要一个包含“容器”菜单的“容器流体”div,它工作正常,我的问题是我需要在菜单下添加一个“全宽”div,我不知道如何做到这一点。 网站内容应该有“container”类,而“full width”div“container-fluid”,但我知道不可能嵌套这样的类。

我怎样才能用CSS解决这个问题,记住“菜单”固定在顶部,“全宽”div必须正常滚动?我想我不能使用绝对定位。我希望它很清楚,否则我会尝试改进这个问题。


我会做三个不同的容器,每个容器相应地保存标题、全宽和网站内容

<div class="container"></div> <!-- header here -->
<div></div> <!-- full width here -->
<div class="container"></div> <!-- site content here -->
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

bootstrap css,如何在容器内制作全宽div 的相关文章

  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads
  • 在 HTML5 中创建可拖动和可缩放的网格

    与其他 HTML5 不同如何创建网格问题 我想知道如何制作一个可拖动且可扩展的 绘制网格非常简单 var c document getElementById canvas var ctx c getContext 2d var width
  • 使用 jQuery 清除 IMG

    我正在尝试从 a 中删除加载的图像 img 元素 但清除或删除 src 不会执行此操作 该怎么办 HTML img src https www google com images srpr logo3w png JQUERY img att
  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po
  • 用隐藏单元格补充 colspanned 表格有什么不好吗?

    我一直在表格上开发一些排序和选择功能 我发现在具有跨单元格的表格中定位非常困难 我只是添加了跨区单元格并将其隐藏 它看起来不错 它与我的 js 一起工作 非常适合索引 但我想知道这是否是合法的方法 stuffing display none
  • Modernizr - 加载 polyfills / 使用自定义检测的正确方法

    我想在网页上使用一些新的 HTML5 表单属性和输入类型 有些浏览器已经支持它们 有些浏览器不支持 也永远不会支持 这就是我想使用 Modernizr 的原因 这就是我的麻烦开始的原因 据我了解 Modernizr 本身并不是一个 poly
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • 防止用户在下拉菜单中选择默认值

    我试图阻止用户选择默认的下拉菜单选项 有没有办法在下拉菜单选项中添加文本而不是值 我的代码
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • iOS7 中“-webkit-overflow-scrolling: touch” 最初的屏幕外元素被破坏

    既然转基因种子已经发布了 我们现在可以谈谈了 看起来 iOS7 中的 webkit overflow scrolling touch 已损坏 最初不在屏幕上的元素的触摸事件不会触发 或者在某些情况下只是不可靠 这是一个例子
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 覆盖并重置 CSS 样式:auto 或 none 不起作用

    我想覆盖为所有表定义的以下 CSS 样式 table font size 12px width 100 min width 400px display inline table 我有一个特定的表 其类名为 other 最后的餐桌装饰应该是这
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗

随机推荐

  • 获取具有相似声音的记录

    我想从联系人表中查找名称与声音匹配的所有重复名称 例如 Rita 或 Reeta Microsoft 或 Microsift Mukherjee 或 Mukherji 我使用了以下查询 SELECT contacts id FROM con
  • 观测信息被泄露

    我有一堂课 我用它作为自身的观察者 当其他对象更改其属性时 我需要它通知我 当它被释放时 我懒得删除观察者 但是我收到这样的错误 An instance 0xf819680 of class was deallocated while ke
  • 如何使用{pre,in,post}顺序遍历结果重建BST

    我们知道前序 中序和后序遍历 什么算法可以重建 BST 因为是 BST in order可以排序自pre order or post order 其实 无论是pre order or post order只需要 如果你知道比较函数是什么 F
  • 如何使用 Selenium WebDriver 在新选项卡(chrome)中打开链接?

    System setProperty webdriver chrome driver D softwares chromedriver win32 chromedriver exe WebDriver driver new ChromeDr
  • MemoryStream 返回时禁用读取

    在我的程序中 我基本上是读取一个文件 对其进行一些处理 然后将其作为内存流传递回主程序 该内存流将由流读取器处理 这一切都将由我的 main 旁边的一个类来处理 问题是 当我从另一个类中的方法返回内存流时 canread 变量设置为 fal
  • 快速读取交错数据的方法?

    我有一个包含多个数据通道的文件 该文件以基本速率采样 每个通道都以该基本速率除以某个数字进行采样 它似乎总是 2 的幂 尽管我认为这并不重要 所以 如果我有渠道a b and c 在 1 2 和 4 的分隔符处采样 我的流将如下所示 a0
  • 如何使用主题中本地存储的字体覆盖默认字体?

    我正在使用 Quarto 构建一个网站 并尝试覆盖主题中的默认字体 我的总体目标是使用本地谷歌字体而不是使用谷歌API my quarto yml看起来像这样 project type website format html theme l
  • MongoDB shell中无序批量更新记录

    我有一个包含数百万个文档的集合 类似于以下内容 id ObjectId value 0 53 combo h 0 v 0 42 h 1 v 1 32 问题是这些值存储为字符串 我需要将它们转换为浮点 双精度 我正在尝试这个并且它正在工作 但
  • 在函数中使用非静态值作为默认参数

    有没有一种好的方法可以将非静态值作为函数中的默认参数 我见过一些对同一问题的较旧的回答 这些回答总是以明确地写出超载而告终 这在 C 17 中还有必要吗 我想做的是做类似的事情 class C const int N Initialized
  • 请推荐一个可处理可拖动元素碰撞检测的 JQuery 插件 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我们正在使用可拖动 http jqueryui com demos draggable JQuery UI 插件 需要禁止元素之间重叠 我
  • 最终方法是否会阻止 Hibernate 为此类实体创建代理?

    Hibernate 使用代理来实现集合的延迟加载 甚至单端关联 根据Hibernate的 3 6 5 参考文档 部分 21 1 3 单端关联代理 如果这样的代理包含 任何最终方法 我的问题是 此限制仅适用于持久字段的 getter sett
  • 如何使用 Jackson (2.x) 提供程序设置 Jersey 客户端来处理 POST 请求

    我正在努力设置 Jersey 客户端来测试对资源的 POST 请求 我的 Jersey 和 Jackson 依赖项如下所示
  • 更改传单标记图标

    我正在使用 Dennis Wilhelm 的 Leaflet Slider 在 Leaflet 地图上显示数据的变化 我正在尝试更改标记图标 但效果不佳 那么 当使用Leaflet Slider显示随时间的变化时 如何更改标记图标呢 我必须
  • 在 Excel 中计算静态随机数(计算一次)

    我正在寻找一种在 Excel 中计算一次随机数的方法 所以它是在第一次调用时计算的 但之后它就不会改变 举例来说 如果我在 B1 有这样的东西RANDONCE A1 然后我第一次在 A1 中输入一个值时 它会计算一个随机值 但随后它不会再次
  • 如何在TPM中加载和使用持久对称密钥?

    我只是想将一个 32 字节长的对称密钥持久存储在 TPM 的 NV 存储中 并在重新启动后使用它 无需将其从 TPM 中取出 来加密小型数据 我尝试用两种不同的方式做到这一点 1 使用 TPM 的随机字节生成器创建密钥 在NV中定义空间并将
  • Ruby 电子邮件编码和引用的可打印内容

    有没有一种直接的方法来指导 TMail 将正文编码为 quoted printable 我只看到其中用于解码此类内容的方法 而不是创建它 你刚刚使用吗TMail 或者你正在使用它ActionMailer 看起来像TMail本身不具备编码为q
  • Java从其他目录导入

    我正在使用 Java 构建企业服务总线 ESB 我不会进入 细节但我必须构建多个使用相同类的服务器 我有以下目录结构 server1 Main java server2 Main java com Database java 我想从Main
  • ngx-bootstrap - 用于输入的时间选择器弹出窗口

    我正在使用time picker组件来自ngx引导程序 https valor software com ngx bootstrap timepicker我想包括time picker如下输入框 更多以弹出对话框的方式 用于日期选择器 ht
  • OrderedDictionary、ListDictionary 和 HybridDictionary 需要什么?

    当三种不同的字典 OrderedDictionary ListDictionary 和 HybridDictionary 都执行相似的功能时 它们的需求是什么 它们都没有排序 并且可以通过所有集合中的键来检索集合的元素 那么 三个不同类的目
  • bootstrap css,如何在容器内制作全宽div

    我想用引导框架制作这种布局 menu x full width site content