个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我正在尝试创建一个页面来显示应用程序、应用程序所在的环境(开发、测试、生产等)，最后是应用程序运行的主机。
在我们的后端，我们进行了设置，以便可以将应用程序设置为主动或被动，也可以将主机设置为主动或被动。我添加了可视化应用程序和主机状态的字形图标。
glyphicons 应该包含在服务器名称按钮中，如果您在 Chrome 中运行 jsfiddle，您将看到它的外观。
问题出在 Firefox 中，字形被向下推到看起来像新行的地方。我不希望发生这种情况 - 我希望它看起来与 Chrome 中的一样。我已经对属性进行了一些谷歌搜索和检查，但无法确定为什么会发生这种情况以及如何解决。
<body>
<div id="container" class="container-fluid col-lg-10 col-md-10 col-sm-12" role="main">
<div class="app row" id="ATStatsProcessor">
<h4>Application Name</h4>
<div class="environment col-sm-4 col-lg-3">
<h5>Environment Name</h5>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
<span class="glyphicon glyphicon-chevron-up pull-right"></span>
<div class="host">
<div class="host btn btn-default btn-pressed">
<span class="button-text">Server Name</span>
<span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
<span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.app {
color: #818a98;
border-radius: 6px;
margin: 1em;
padding: 1em;
background-color: #e4e9ef;
}
div.environment h5 {
display: inline-block;
max-width: 80%;
}
.environment {
color: #818a98;
border-radius: 6px;
margin: .5em 2.25em;
padding-top: .25em;
padding-bottom: 1em;
background-color: white;
}
.app .environment .host {
display: inherit;
margin: .25em;
}
.host.btn.btn-default {
background-color: #c93135;
color: white;
}
.host.btn.btn-pressed {
background-color: #2f3b46;
color: white;
}
.confirm.btn-success {
background-color: #63a72c !important;
}
.confirm.btn-danger {
background-color: #c93135 !important;
}
body {
background-color: #f8f9fb !important;
}
.icon-size-small {
font-size: x-small;
}
.state-enabled {
color: green;
}
.button-text {
display: inline-block;
max-width: 85%;
overflow-x: hidden;
}
最佳答案
在 Firefox 中，似乎 float 清除了具有 white-space: nowrap; 属性的父元素中的所有元素。不知道这是为什么，但它可以很容易地解决。您可以通过几种不同的方式解决此问题:
通过在字形之后移动按钮文本范围来修改您的 HTML 代码，如下所示:
<div class="host btn btn-default btn-pressed">
<span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
<span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
<span class="button-text">Server Name</span>
</div>
--或者--
从您的 .btn 类中删除属性 white-space: nowrap;。
--或者--
通过将此代码添加到您的 CSS 来绝对定位您的字形:
.host {
position: relative;
}
.host .glyphicon {
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
.host .glyphicon-hdd {
margin-right: 21px;
}
关于html - Glyphicons 在 Firefox 中没有正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37601756/
26
4
0
我想使用微调器来刷新数据。我已经使用了上面的代码。 数据正在刷新。但是图标没有旋转。 最佳答案 尝试使
我是 pug 的新手，想在“所有月份”的下拉菜单中添加 glyphicon glyphicon-calendar 吗？ .pull-right select.form-control.btn-p
我正在使用 Bootstrap 3.0，我正在使用 Twitter Bootstrap Glyphicons .我正在尝试使用“glyphicon glyphicon-plus”，但是当我放入类时，它
当鼠标悬停在字形标志上时，我显示一些信息。该代码现在可以运行，但仅适用于添加内容。我想使用相同的 JQuery 代码进行编辑、删除等。我不想一次又一次地重复 Jquery 代码。 如何做到这一点？ H
根据他们的指南，这太奇怪了 here ，我添加了一个带有 glyphicon glyphicon-cog 的跨度......但是，当加载我的页面时，它实际上显示了信封 - 这是 glyphicon g
我正在使用 angular-cli 和 bootstrap4 做一个应用程序，但是当我对 Glyphicons 进行一些引用时，图标不会出现。例如，当我添加以下代码时: Star 我在我的角
如何去除白色背景？我已经设置了 background-color:transparent 但仍然有白色背景。 这是一张图片: 我的 HTML 代码: 这是我的 CSS: .glyphicon-th-
我尝试使用图标 glyphicon glyphicon-chevron-right 在我的设计中显示方向，但我需要比默认尺寸更细的图标。那么如何减少 glyphicon glyphicon-chevr
我已经购买了完整的 Glyphicons PRO 包，并希望将它与 Bootstrap 3 一起使用。 但是，我似乎无法找到有关如何执行此操作的全面文档。 Glyphicons 网站缺少“如何使用部分
如何从 yii2 中的特定页面中删除 glyph-icon-pencil 和 glyph-icon 垃圾 最佳答案 您可以在 actionColumn 中使用模板 $dataProvider,
我正在将 jquery-validation 与 glyphicons 集成。基本上，当用户正确输入内容时，我希望在输入框中看到字形图标，如下所示: 但我希望它成为通过 CSS :after 属性触发
比较 http://fiddle.jshell.net/R3qEn/6/和 http://fiddle.jshell.net/R3qEn/7/ - 唯一的区别是 css-frame 的第一行 - 我们
字形图标显示在按钮文本上方。我尝试使用 vertical-align: middle; 但它仍然不起作用。 代码: " . $_SESSION['
我正在使用 Bootstrap3 字形图标。例如 我希望它是绿色的，所以我使用了一个名为 public 的类: .public { color:green; } 当我将此应用于图标时，它不起
在我的电脑上，运行 Visual Studio，运行完美... 但是，当我将它部署到我的服务器时，并没有呈现 Glyphicons...谁知道可以是什么？ Site that isn't workin
我尝试将 bootstrap datetimepicker 与 glyphicon 日历一起使用。但是如果我点击选择器，什么也不会发生。 连日历都打不开。我在我的 .jsp 页面中添加了以下 .js
如何在此列表中将我的 Glyphicons 垂直和水平居中(跨浏览器)？ 我的 CSS 根本没有让元素居中。 它的样子: 它应该是什么样子:
我正在尝试修复我的字形。每当加载页面时，它们都会移动并在很短的时间后出现，但我的导航因此而摇晃。 有人对此有解决方案或经验吗？ 下面是我如何加载字体的代码: @font-face { font
我在 bootstrap v3.3.5 上使用 bootstrap.min.css。我从 http://getbootstrap.com 下载 Bootstrap 并在本地使用它。我注意到在 IE 9
我从这个 link 下载了 Bootstrap v3.1.1 .我在我的 ASP.NET MVC 元素中使用 Glyphicon。 我面临的问题是，在我看来，我有时可以看到 Glyphicon 图标，
我是一名优秀的程序员,十分优秀！