【问题标题】:Bootstrap Buttons Won't Display Properly引导按钮无法正确显示
【发布时间】:2019-07-24 08:31:59
【问题描述】:

我的问题

我正在尝试在导航栏中间添加 3 个大按钮(摘要、生成器、历史记录)。下图是我的理想结果。我想要一个没有底部边框的活动的。

我已经尝试了所有我能想到的方法来让它发挥作用。当我在你认为应该去的地方添加一个按钮时,我得到的是:

注意黄色椭圆,那是我的按钮结束的地方!!我不知道我做错了什么。

这里是页面的链接,这里贴代码太长了:

http://johntesting.azurewebsites.net/workflow-blue/blank-backup.html

谁能帮我解决这些按钮?我一直在疯狂地试图弄清楚这一点。

感谢收看。

约翰

【问题讨论】:

  • 你厌倦了z-index吗?
  • 这里没有 HTML 代码,甚至在您包含的页面上也没有按钮
  • 抱歉,FTP 出现问题。我现在正在重新上传项目。上传过程中一定有问题。
  • 确定链接已更新。再次,我很抱歉。 johntesting.azurewebsites.net/workflow-blue/blank-backup.html

标签: html css twitter-bootstrap twitter-bootstrap-3


【解决方案1】:

在您的“.page_title”div 上设置display:flex; 以立即看到按钮更接近您期望的位置。该 div 的第一个子元素是一个 h3,它是一个填充整个 div 的块元素,没有为您的按钮留下空间,导致它们被推到下一行。

另一种方法是将 h3 的 display 属性设置为 inline-block。

【讨论】:

  • 谢谢 JasonB,我现在正在尝试这个建议。
猜你喜欢
  • 2021-03-07
  • 1970-01-01
  • 2021-04-04
  • 1970-01-01
  • 2014-03-01
  • 2021-12-23
  • 1970-01-01
  • 2022-01-22
  • 2018-06-06
相关资源
最近更新 更多