如何将 Twitter 引导选项卡置于页面中央?
我正在使用 twitter bootstrap 创建可切换选项卡。这是我正在使用的 css:
<div class="container">
<ul class="nav nav-tabs">
<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 正确显示选项卡,但拉到左侧(这是应该发生的情况)。我尝试修改 CSS 以使选项卡位于页面中央,但还没有成功。我认为有更多 CSS 经验的人会知道如何做到这一点。
作为注释,还有一个关于居中导航药丸的问题,我尝试过,但它不适用于普通的导航选项卡。
谢谢。
I'm using twitter bootstrap to create togglable tabs. Here is the css I'm using:
<div class="container">
<ul class="nav nav-tabs">
<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>
This html displays the tabs correctly, but pulled to the left (which is what is supposed to happen). I've tried tinkering with the CSS to get the tabs to center on the page, but no luck yet. I thought someone with more css experience would know how to do this.
As a note, there is another question about centering nav pills, which I tried, but it didn't work with just plain nav tabs.
Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(8)
nav-tabs
列表项会被引导程序自动浮动到左侧,因此您必须重置它,并将它们显示为inline-block
,并将我们的菜单项居中将text-align:center
属性添加到容器中,如下所示:CSS
演示: http://jsfiddle.net/U8HGz/2/show/
在此编辑: http://jsfiddle.net/U8HGz/2/
编辑:由用户 @ 提供的可在 IE7+ 中运行的修补版本在下面的评论中我的头很痛。
演示:http://jsfiddle.net/U8HGz/3/show/
在此编辑:http://jsfiddle.net/U8HGz/3/
nav-tabs
list items are automatically floated to the left by the bootstrap so you have to reset that and instead display them asinline-block
, and to center menu items we have to add the attribute oftext-align:center
to the container, like so:CSS
Demo: http://jsfiddle.net/U8HGz/2/show/
Edit here: http://jsfiddle.net/U8HGz/2/
Edit: patched version that works in IE7+ provided by user @My Head Hurts down in the comments below.
Demo: http://jsfiddle.net/U8HGz/3/show/
Edit here: http://jsfiddle.net/U8HGz/3/
接受的答案是完美的。它可以进一步定制,以便您可以与标准左对齐选项卡并排使用。
要使用它,请将“centered”类添加到选项卡元素中
Accepted answer is perfect. It can be further customized so that you can use it side by side with the standard left aligned tabs.
To use it, add "centered" class to your tabs element
添加类
nav-justified
对我有用。这不仅使选项卡居中对齐,而且还可以将它们很好地分布在顶部。尽管接受的答案效果很好,但我发现上述内容对于 Bootstrap 来说更自然。
Adding the class
nav-justified
works for me. This not only center aligns the tabs but it also spreads them nicely at the top.Even though the accepted answer works well, I found the above more natural to Bootstrap.
添加即可
只需在设置选项卡时
,这对我有用。例如
Simply adding
when I set up my tabs, worked for me.
For e.g.
您可以使用 引导网格 来居中导航选项卡。由于引导网格分为 12 个等于列,因此您可以轻松使用 4 列进行导航,并具有 4 列偏移:
因此,您的导航位于页面中间(也是响应式解决方案),左侧和右侧各有 4 列。
我发现网格对于制作响应式网页非常有用。
祝你好运!
You can just use bootstrap grid to center your nav-tabs. Since bootstrap grid is divided on 12 equals columns, you can easily use 4 columns for your navigation with 4 columns offset:
<div class="col-sm-4 col-sm-offset-4">
.Therefore your are getting your navigation in the middle of the page (also responsive solution) with 4 columns free on the left and the right side.
I found grid really useful for making responsive web pages.
Good luck!
如果您简单地使用 bs4 ,您可以将
justify-content-center
类添加到您的导航选项卡中,使其在页面上居中。如果您希望选项卡对齐(完整),请添加nav-justified
类,在这种情况下,如果您的导航中有 3 个项目,每个项目都有 33% 的比例。如果有 5 件物品,每一件都有 20%。如果您使用 bs3 ,另一种方法是简单地添加
text-center
。if you use bs4 simply you can add
justify-content-center
class to your nav-tabs to center it on page. if you want your tabs to be justified (full-with) addnav-justified
class to it, in this case if you have 3 items in your nav each of them has 33% with. if 5 items is there each one have 20% with.another way is simply to add
text-center
if you are use bs3 .Bootstrap 本身有一个名为
nav-justified
的类。只需像这样添加它:如果您还想对齐
的中心内容,请使其
disply: inline-block
。Bootstrap itself has a class for this regard named
nav-justified
. Simply add it like this:If you want to align center content of
<li>
as well, make itsdisply: inline-block
.试试这个:
Try This: