Bootstrap中的中心药丸 [英] Center Pills in Bootstrap
本文介绍了Bootstrap中的中心药丸的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Bootstrap的新手，几乎完全遵循了这个问题，似乎无法使我的药丸/药片居中吗?
new to Bootstrap, following this question almost exactly, and can't seem to make my pills/tabs center?
</head> <body>
<div class="container">
<ul class="nav nav-pills">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
<html>
.nav-tabs > li, .nav-pills > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
}
.nav-pills {
text-align:center;
}
我将CSS保存在一个名为style.css的文件中，并且正在这样导入
I have the CSS in a file called style.css, and I am importing as such
<link href="style.css" rel="stylesheet" type = "text/css">
这两个文件都在bootstrap文件夹中，因此不确定是否发生了什么事
Both files are within the bootstrap folder, so not really sure what's going on
推荐答案
您需要覆盖bootstrap定义的.nav-pills css类(就像您已经做的那样).您应该更新边距并为元素指定宽度.
You need to override the .nav-pills css classes defined by bootstrap (as you are already doing). You should update the margin and the specify a width for the element.
.nav-pills {
margin: 0 auto;
padding: 0;
width: 400px;
}
这篇关于Bootstrap中的中心药丸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
