Bootstrap 流体布局 - 侧边栏的固定宽度

2023-11-26

我有一个基于 Twitter Bootstrap 的流畅布局。

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span2">
           <!--Sidebar content-->
       </div>
       <div class="span10">
           <!--Body content-->
       </div>
    </div>
</div>

如果侧边栏具有固定宽度,那就太好了。如果将布局从流体更改为“静态”并将侧边栏的宽度设置为

220px

我调整窗口大小或将分辨率更改为 1024...正文内容跳转到侧边栏下方。我怎样才能避免这种情况?

编辑: 知道了。稍后将发布我的“解决方案”。感谢您的回复


我认为你看起来像这样:

<div class="sidebar span4">
    this is my fixed sidebar
</div>
<div class="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">this is fluid</div>
            <div class="span3 offset1">yeah!</div>
            <div class="span6">Awesome!</div>
        </div>
        <div class="row-fluid">
            <div class="span6">1 half</div>
            <div class="span6">2 half</div>
        </div>
    </div>
</div>

为了您的方便,这里有一个小提琴:http://jsfiddle.net/TT8uV/2/

一般注意事项:

您不需要使用 bootstrap 作为您的“主容器”,因此您可以将您的 侧边栏与网格系统并排(如 bootstrap 流畅且反应灵敏)。这样你就有了A LOT的控制权 侧边栏,不影响实际内容。

希望对你有帮助。

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

Bootstrap 流体布局 - 侧边栏的固定宽度 的相关文章

  • 当内容悬停时变为粗体时防止表格扩展

    我正在处理一张表格 其中一个要求是每一行在悬停时变为粗体 我可以正常工作 但是当发生这种情况时 列的宽度会发生变化 有什么办法可以防止这种情况发生吗 table width 100 border 1px solid ccc margin t
  • CSS 字体不起作用

    我正在尝试向我的网站添加自定义字体 我尝试了很多事情但没有成功 这是我的CSS代码 font face font family myFirstFont src url ellis ttf body margin 0 padding 0 wi
  • 两列 Jekyll 布局,用标签分隔?

    我目前正在 Jekyll 博客上工作 我想将我的 Markdown 文件采用以下格式 div class row div class col md 6 div div class col md 6 div div 我希望我的代码块在一列中
  • 仅使用 CSS 更改颜色几秒钟

    是否可以在悬停 X 秒时更改 div 的颜色 然后仅使用 CSS 返回其原始颜色 我不希望颜色之间有任何淡入或淡出 例如 如果我想在悬停时将 div 的颜色更改为黄色 1 秒 则它必须保持黄色 1 秒 然后立即返回到原始颜色 This ht
  • 带有透明边框的响应式箭头进度条

    我正在尝试构建一个进度条 如结帐中常见的那样 问题是 箭头之间的边界是透明的 整个事情应该是反应灵敏 到目前为止我已经明白了 http codepen io MrBamblele pen rVBeoz http codepen io MrB
  • jquery - 如何根据我的滚动位置滚动顶部动画到下一个可见的 div/类?

    如果标题有点模糊 请原谅我 因为我不知道如何写下来 基本上 我们有一个包含 6 个 场景 的页面 他们都有班级 scene和不同的 ID 例如 scene1 scene2 etc 首先 我们必须动态更改每个场景的颜色 gt 场景 1 是浅色
  • 如何为带有标题图像的移动设备设置 HTML,该图像占据浏览器的整个宽度?

    我担心的是我必须为移动设备建立一个网站 概念中是将图像设置为标题 现在的问题是 不同的智能手机具有不同的显示分辨率 有例如840x560 480x320 或 800x480 我必须编写什么元标签 CSS 等才能使 每个 现代智能手机中的图像
  • 文本区域下的额外填充

    我的文本区域下面有额外的填充 但我似乎找不到它的来源 我已将单独的代码放在此页面上 http jsfiddle net wfuks http jsfiddle net wfuks 我似乎找不到它的来源 它有类 field field bac
  • IE8/9 - CSS 文件的最大字节数

    我目前正在开发的应用程序有过多的 CSS 样式 我们似乎已经达到了 IE8 9 以及它可以加载的 CSS 数量的某种限制 在某些时候 它会停止解释 CSS 从而破坏某些页面上的样式 我们正在使用 Combres 来压缩 缩小导致 CSS 文
  • CSS flex-basis: 0% 与 flex-basis: 0px 有不同的行为

    根据MDN https developer mozilla org en US docs Web CSS flex the flex 1应设置简写flex basis 0 然而 它实际上设置了flex basis 0 更令人惊讶的是 这有不
  • 使用 CWnd::EnableTooltips() 可以实现多行工具提示吗?

    我正在尝试使我的工具提示成为多行 但我似乎没有太多运气 我在创建 在本例中为编辑框 后直接调用 CWnd EnableTooltips 并处理 TTN NEEDTEXT 消息 我的工具提示显示正确 但仅显示为一行 我尝试将 n 添加到处理
  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个
  • Django 未在 404 页面上应用应用程序中的 CSS 文件

    姜戈3 0 8 Python 3 7 x 我有一个包含一些应用程序的 Django 项目 我正在尝试为 400 403 404 500 错误制作一些 默认 错误页面 我已经这样做了 并显示了适当的模板 但没有任何样式或 JS 在 404 错
  • 有没有一种方法可以使页面布局在 100% 缩放下完美契合,同时又尊重更大的缩放系数?

    有多种方法可以布局网页 使其适合浏览器视口 DOMwindow 当我说 适合 时 我包括更改所用字体的大小 更改 DIV IMG 和其他渲染元素的宽度和高度 以及允许元素 流畅 移动 目标是使页面在所有显示设备 从小型手机到大桌面屏幕 上看
  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te
  • Bootstrap下拉菜单文本颜色

    所以我第一次使用 Twitter 的 Bootstrap 我试图在下拉菜单折叠后更改其文本的颜色 如果有道理的话 I used 当您压缩网页以显示折叠菜单并转到下拉列表时 您会看到蓝色背景转移到下拉菜单项 但字体颜色为黑色 使其很难阅读 我
  • HTML 布局:向现有网站添加侧边栏

    我有一个网站 其正文如下所示 div div div div div div 这些中没有使用绝对 相对定位技巧divs 但是有很多floats clears margins and padding这些风格divs 及其内部元素 所有这些都会
  • 有没有办法强制显示工具提示?

    我有一个验证字段的方法 如果无法验证 该字段将被清除并标记为红色 我还希望在框上方弹出一个工具提示 并向用户显示该值无效的消息 有没有办法做到这一点 并且可以控制工具提示显示的时间 我怎样才能让它自己弹出而不是鼠标悬停时弹出 If the
  • CSS交付优化:如何推迟CSS加载?

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers
  • CSS3 背景渐变未验证,有人可以告诉我为什么吗?里面的代码示例

    有人能告诉我为什么下面的 css 没有验证吗 我一直在尝试自己研究这个问题 但没有运气 我读过的所有文档都说这是在 css3 中进行渐变的正确原因 header color white font size 12px font family

随机推荐

  • 如何使图像完全适合轮播(Bootstrap)

    我已经制作了一个功能齐全的旋转木马 但问题是旋转木马的右侧出现了白色块 我想摆脱它 请帮忙 div class carousel inner div class item active img src Jellyfish jpg alt i
  • 运行简单的远程 Akka 应用程序

    我正在尝试设置一个简单的服务器 客户端 akka 使用 Akka 2 0 3 应用程序 但无法连接 在此之前 这是基本代码 import com typesafe config ConfigFactory import akka actor
  • 使用Unix JOIN命令合并两个文件

    尽管进行了所有研究 但这并没有像我预期的那样工作 我肯定错过了什么 文件1 cat file1 csv 1 123 JohnDoe 1 456 BobDylan 1 789 BillyJean 文件2 cat file2 csv 111 1
  • 是否可以让组织模式在议程待办事项列表中显示面包屑?

    在 Emacs 中 我有一组以下格式的 TODO H1 H2 H3 TODO X 当我查看议程待办事项视图时 它仅显示为TODO x 有没有办法让议程视图将其显示为H1 H2 H3 TODO X 我从以下位置找到了这个解决方案here se
  • 如何从 Java 代码调用 AWS lambda 函数/处理程序

    我是 AWS lambda 新手 我已经创建了一个带有处理程序的 lambda 函数 example Orders orderHandler 这是自定义处理程序 现在我想从我的 Java 程序中调用它 我需要如何调用它 这个类中的2个方法应
  • 什么定义了“活动”线程?

    在Java并发中 什么构成了线程 active 只是它没有空闲这一事实 从技术上来说 等待 或 挂起 的线程是否仍然被认为是活动的 据我所知 活跃 这个词似乎被经常使用 但从未被定义过 这ThreadGroup enumerate 方法记录
  • 是否可以在没有电子邮件 ID 的情况下注册 Facebook? [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我有关于 Facebook 注册的问题 我需要知道在不提供电子邮件 ID 的情况下使用任何手机号码或任何其他方式注册的可能性 这很重要 因为我正在开发一个 Facebook 应用
  • 如何防止 Spring MVC 在 Spring Boot 中转换为 Collection 时解释逗号?

    我们基本上有同样的问题这个问题姿势 但对于列表 此外 我们正在寻找一个全局解决方案 目前我们有一个 REST 调用 其定义如下 RequestMapping ResponseBody public Object listProducts R
  • 如何处理文本区域中的

    我想要一个可以处理按下情况的文本区域tab key 在默认情况下 如果您按tab键然后焦点离开文本区域 但是当用户想要输入时情况又如何呢 tab文本区域中的键 我可以捕获此事件并将焦点返回到文本区域并将选项卡添加到current光标位置 你
  • Python 跟踪模块 - 跟踪执行的行,但保存到文件,而不是标准输出

    我想跟踪 python 脚本的执行行 但是我使用的程序需要将内容打印到标准输出 python 跟踪模块的跟踪选项将它们打印到标准输出 有没有办法告诉它不要将它们打印到标准输出 而是将它们保存到文件中 我尝试设置outfile参数 但它不会停
  • Android 文件描述符泄漏调试

    我们公司有很多在虚拟 真实设备上运行的用户界面测试 运行一段时间后测试随机崩溃 我认为这是文件描述符超出的结果 我使用 ls proc PID fd wc l and lsof p PID 但它并没有多大帮助 lsof 中的大多数行看起来像
  • Athena 的 .csv.metadata 文件的数据格式是什么?

    的数据格式是什么 csv metadata由 Amazon Athena 编写的文件 除了每个查询的输出文件之外 还有一个元数据文件 看起来它描述了结果的架构 我认为这就是雅典娜用来创建ResultSet ResultSetMetadata
  • Oracle 中表行的创建日期时间是多少?

    昨天我的朋友 BI 专家 向我解释了一个预言机问题 有一个 Oracle 数据库包含大量数据 但它们不会为每个表创建列来存储每行的创建日期时间 所以在这种情况下他如何获得每行的创建日期时间 时间戳 每行都有自己的系统更改号 SCN 这精确地
  • 蟒蛇 |为什么访问实例属性比访问本地慢?

    import timeit class Hello def init self self x 5 def get local attr self x self x 10x10 x x x x x x x x x x x x x x x x
  • 数据流模板 Cloud Pub/Sub 主题与 BigQuery 订阅

    我正在设置一个简单的概念验证来学习 Google Cloud 中的一些概念 特别是 PubSub 和 Dataflow 我有一个 PubSub 主题greeting 我创建了一个简单的云函数 用于向该主题发送发布消息 const escap
  • 使用linux宏access_ok()有什么意义

    我一直在做一些研究 我对这个宏有点困惑 希望有人能给我一些指导 我有一些 ioctl 代码 我继承的 而不是编写的 它做的第一件事是检查是否access ok 在继续从用户空间复制数据之前 define lddk copy from use
  • 找不到“React/RCTBridgeModule.h”文件

    在 xcode 上构建反应本机 iOS 应用程序时出现此错误 npm install 和 rpm 链接后开始出现此错误反应本机FS图书馆 但在网上搜索解决方案后 我注意到很多人在安装其他 React Native 库时遇到了同样的错误 A
  • Kotlin - 使用 Persistence Room:runtime lib 从 Room 数据库返回新插入的 id

    我正在尝试使用 Kotlin 在 Room 数据库中插入用户记录 它工作得很好 现在我想返回新插入的记录id来检查Room数据库中的记录是否成功插入 但是当我在插入方法中应用 Long 返回类型并运行代码时 我收到以下错误 错误 方法返回
  • Vec::new() 如何知道请求的元素类型是什么?

    我可以创建任何类型的向量 如下所示 let mut vec Vec
  • Bootstrap 流体布局 - 侧边栏的固定宽度

    我有一个基于 Twitter Bootstrap 的流畅布局 div class container fluid div class row fluid div class span2 div div class span10 div di