如何在Bootstrap折叠标题中居中/对齐文本/图标按钮?

我有一些jQuery移动页面,其标题包含文本和/或按钮。有时会有居中的文本,其他的只是挤满了按钮。有几种屏幕尺寸和/或按钮数量。

带按钮和文本的标题

如何在Bootstrap折叠的navbar-header中重复此操作?我创建了这个jsfiddle示例,但无法弄清楚如何居中/对齐文本和按钮。

Jsfiddle样本

<div class="navbar-header">
<!-- button left -->
<a type="button" class="navbar-toggle collapsed pull-left navbar-icon" data-toggle="collapse" data-target="#navbar"> 
    <i class="fa fa-bars fa-2x"></i>
</a> 

<!-- button right --->
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collapse">
    <i class="fa fa-edit fa-2x"></i>
</a>

<!-- in the middle -->
<div style="text-align:center">
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
    <i class="fa fa-reply fa-2x"></i>
</a>
 <a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
    <i class="fa fa-foward fa-2x"></i>
</a>
 <a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
    Some Text
</a>
</div>
</div>

<style>
body {
padding-top: 60px;
}
.navbar-header .navbar-icon {
    line-height:30px;
    height:30px;
    border:0;
}

.navbar-header  a.navbar-icon {
    padding:0 0px;
}
</style>

我能找到的最接近答案是先前的讨论在这里尝试了答案,没有用。

有什么提示我想念的吗?谢谢

更新:根据建议的最终版本可能与自定义引导程序有关,我的本地版本看起来比jsfiddle更好。

在此处输入图片说明

卡洛斯·罗克(Carlos Roque)

您之所以无法居中放置图标,是因为它们具有css属性,可以使它们向右浮动。

在图标上添加一个类,例如“ no-float”,然后将其添加到您的css
.no-float { float:none!important; }

这将使其工作

所以这
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
变成这个
<a class="no-float navbar-toggle collapsed navbar-icon" data-toggle="collaplse">

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在html按钮中将图标左对齐和文本居中对齐?

如何在文本的两侧居中对齐图标?

如何在标题保持正确的同时折叠标题中的文本?

标题中的垂直对齐导航图标/按钮

如何在 CardView 的标题中居中 TextView?

如何在标题中居中图像?

使用 CSS 将图标与标题中的文本对齐

如何在按钮上方使文本居中对齐

如何在扩展浮动操作按钮中居中对齐文本?

如何在按钮内将图标和文本居中?

如何居中对齐WPF在Datagrid行标题中的行号

如何使用 flex 在标题中垂直居中对齐元素

如何居中对齐 TemplateField 的标题文本?

Bootstrap 4:按钮使文本与图标对齐

如何在AG网格控件的标题中居中放置文本?

如何在JFrame中居中对齐标题?

对齐标题中的段落文本

如何在标题中添加按钮

如何在phonegap应用程序的标题中设置图标和文本内联?

Bootstrap 3 / CSS:如何在面板标题中正确垂直对齐

如何在ngx-bootstrap手风琴组标题中添加图标?

如何使用Bootstrap将按钮居中对齐

Bootstrap-使用浮动按钮将页面标题居中对齐

如何在实现CSS导航栏的按钮内部居中对齐图标?

如何使粘性标题中的文本和图标变黑?

如何在RMarkdown中将浮动图像(环绕文本)与居中标题对齐到右侧?

如何在树视图标题中创建按钮(创建和导入按钮旁边)并赋予其功能?在odoo 9

如何在响应标题中将徽标居中

如何在转盘中居中对齐文本?