Bootstrap 中的固定宽度表格列

2024-01-05

我正在使用 Bootstrap 3 作为后端应用程序,该应用程序在表中显示数据。每行末尾有一个删除按钮(有时还有编辑按钮)。

我对具有删除按钮的列使用 col-md-1,而在其他列上使用 col-md-x 的变体,效果很好。

让我烦恼的一件事是,当我放大浏览器窗口时,col-md-1 列变得很大,由于引导网格设计,这是有意义的。这是一个屏幕截图:

但每次我看到它仍然让我烦恼。

是否可以为列指定固定宽度,例如 32 像素,同时继续使用我真正喜欢的 bootstrap 的 col-md-x 功能?

[编辑]也许需要澄清:我正在寻找最大宽度,例如最小宽度 32 和最大宽度 32,那么该列的宽度不应超过 32 像素,也不应缩小到小于 32 像素。


 .tdicon{ width: 32px !important; }

这不起作用:

<th class="col-md-6"></th>
<th class="col-md-2"></th>
<th class="col-md-4"></th>
<th class="tdicon">&nbsp;</th>
<th class="tdicon">&nbsp;</th>

但这有效:

<th class="col-md-6"></th>
<th class="col-md-2"></th>
<th></th>
<th class="tdicon">&nbsp;</th>
<th class="tdicon">&nbsp;</th>

现在,tdicon 列变为 32 px,并在调整大小后保持 32 px。诡异的!

我很高兴这是有效的,但解决方案让我感到困惑......

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

Bootstrap 中的固定宽度表格列 的相关文章

  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • 将 Div 放置在另一个 DIV 下方

    我有两个 DIV 元素 其中之一具有绝对位置 主 DIV 的左下角 第二个 DIV 是隐藏的 只有单击链接才能显示 我需要第二个出现在第一个下方 但由于第一个 div 的位置是绝对的 第二个 div 出现在第一个 div 之上 HTML 代
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red
  • 在 Android 上禁用标注(上下文菜单)

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • Bootstrap:如何将按钮组对齐在中心(垂直)

    在下面的代码中
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 使用 Twitter Bootstrap 解除警报不起作用?

    我正在使用谷歌浏览器 Using 推特引导程序 http twitter github com bootstrap 我想添加一个简单的警报 不幸的是alert http twitter github com bootstrap compon
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下

随机推荐

  • 用逗号分割以及如何从分割中的引号中排除逗号

    蟒蛇2 7代码 cStr aaaa bbbb ccc ddd newStr cStr split print newStr gt aaaa bbbb ccc ddd 但是 我想要这个结果 result aaa bbb ccc ddd 解决方
  • Angular 9 生产构建错误 - 需要伪类或伪元素

    Angular 9 项目 ng 服务工作正常 但是当我进行生产构建时出现以下错误 块 runtime 5d6d7c5bcca533f7263c js 运行时 1 46 kB 条目 渲染 块 1 main d2b72f349c71c888a6
  • Hsqldb 存储过程

    我正在尝试在内存 Hsqldb 数据库中设置一个存储过程以进行测试 我正在使用的存储过程是在 MySql 中开发的 因此我想使用 HSqlDb 设置它以适应我的测试套件 我正在尝试创建该过程的简化版本 但目前还没有任何乐趣 程序是 CREA
  • Tensorflow Metal 插件已注册错误

    我已经使用安装了 Tensorflow 和 Metal 插件pip在 Mac Mini 2020 M1 上 pip3 install tensorflow macos tensorflow metal pip3 uninstall nump
  • 如何限制 while 循环中的项目

    这是我的项目中的 while 循环 div class index a href img width 200 height 171 alt src a div
  • jQuery 多次点击事件

    我被迫使用从外部服务器加载的脚本 该脚本基本上添加了一个元素 div class myClass 并绑定一个click的方法 事情是 在click与元素关联的函数 它们有一个return false声明在最后 我也有自己的脚本 我正在尝试添
  • 如何在 OSX 上卸载 pip?

    我运行了以下命令 easy install pip sudo pip install setuptools no use wheel upgrade 如何反转这两个命令以使我的 python 在 OSX 中恢复到其原始状态 删除 pip 作
  • R Shiny:数据表行的鼠标悬停文本

    有没有办法在将鼠标悬停在数据表显示中的行 记录 上时显示鼠标悬停文本 在 StackOverflow 上解决了一些类似的问题后 我发现了 2 个示例代码 一个显示列单元格的悬停文本 另一个在鼠标悬停时突出显示整行 显示列单元格悬停文本的示例
  • 示例 XSD 失败并显示“错误:未找到元素 X 的声明”

    尽管我是 xml 解析领域的新手 但我能够xsd创建有效的c 并成功编译和链接 但编译器优化 了实例化 所以 从第一步开始 我尝试你好世界CodeSynthesis 中的 xml 示例 http www codesynthesis com
  • 如何查看有关 Firebase JavaScript 客户端正在执行的操作的更多详细信息?

    我想更深入地了解 Firebase JavaScript 客户端库正在做什么 我正在使用 Firebase 开发一个 JavaScript 应用程序 该应用程序必须处理很多复杂性 例如 它必须处理网络中断和间歇性高延迟期 客户端库正在处理这
  • 如何在 Python 上使用 PuLP GLPK 为混合整数线性规划 (MILP) 的决策变量编写 IF 条件?

    我正在尝试使用 PuLP 上的混合整数线性规划和 Python 上的 GLPK 求解器来解决优化问题 到目前为止 我已经成功解决了带有约束的基本优化问题 例如 prob LpProblem MILP LpMinimize x1 LpVari
  • PHP 对象运算符优先级 (->)

    我写了一些代码 class a public b f gt c a new a b b echo a gt b f 当我使用 cli 时 它输出 c 但是当我使用 apache http 服务器时 抛出错误Illegal string of
  • 无需 JavaScript 即可模拟 bootstrap side popover

    我有一个仅支持现代浏览器的网站 我喜欢 bootstrap popover 的美感 但真的不喜欢它如何依赖 jquery 小部件和 javascript 来定位箭头 我理解为什么它曾经是必要的 但现在确实不应该了 我想看看我是否能得到类似的
  • 在 Dart 中如何判断 DOM 何时准备就绪?

    我想在页面准备好后获取有关某些 DOM 元素的一些信息 但我还没有弄清楚如何判断这是什么时候 我尝试过使用document on contentLoaded and document on readyStateChange 但似乎都不起作用
  • 为不同的存储库设置不同的配置[重复]

    这个问题在这里已经有答案了 我想知道如何更改命令的内容git config list 我将从中提取 分叉一个存储库GitHub https github com 我将在我的 Windows Linux 和 Mac 工作站上配置此类存储库 如
  • 在 MATLAB 中计算函数的反函数

    如何在 MATLAB 中计算函数的反函数 假设你想计算 f x e x 的倒数 代码是什么 如果分析方法失败 尽可能首选 请使用数值方法 给定 y 并猜测 x0 的逆 x fzero x f x y x0 或者当 x 的范围已知在 xmin
  • Android:检测活动何时返回到上一个活动

    我有一个带有 listView 的活动 A 用户单击启动活动 B 的任何项目 根据用户在活动 B 中执行的操作 可能会更改活动 A 上的 listView 所以我的问题是 当用户从活动 B 返回到活动 A 时 如何告诉活动 A 它已恢复 我
  • 数据列值不会更改为浮点型

    我有一个数据框 df Name Stage Description 0 sri 1 sri is one of the good singer in this two 1 nan 2 thanks for reading 2 ram 1 r
  • 找不到 JupyterLab 应用程序资产

    我刚刚在我的 MacBook 上使用 pip 下载了 jupyter lab 当我在终端上运行 jupyter lab 时 浏览器打开并出现以下错误 JupyterLab 错误 JupyterLab 应用程序资产未在以下位置找到 选择 自制
  • Bootstrap 中的固定宽度表格列

    我正在使用 Bootstrap 3 作为后端应用程序 该应用程序在表中显示数据 每行末尾有一个删除按钮 有时还有编辑按钮 我对具有删除按钮的列使用 col md 1 而在其他列上使用 col md x 的变体 效果很好 让我烦恼的一件事是