如何将 Twitter 引导选项卡置于页面中央?

发布于 2025-01-08 14:30:11 字数 670 浏览 1 评论 0原文

我正在使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

初心 2025-01-15 14:30:11

nav-tabs 列表项会被引导程序自动浮动到左侧,因此您必须重置它,并将它们显示为 inline-block,并将我们的菜单项居中将 text-align:center 属性添加到容器中,如下所示:

CSS

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

演示: 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 as inline-block, and to center menu items we have to add the attribute of text-align:center to the container, like so:

CSS

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

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/

冬天的雪花 2025-01-15 14:30:11

接受的答案是完美的。它可以进一步定制,以便您可以与标准左对齐选项卡并排使用。

.nav-tabs.centered > li, .nav-pills.centered > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs.centered, .nav-pills.centered {
    text-align:center;
}

要使用它,请将“centered”类添加到选项卡元素中

<ul class="nav nav-tabs centered" >
..
</ul>

Accepted answer is perfect. It can be further customized so that you can use it side by side with the standard left aligned tabs.

.nav-tabs.centered > li, .nav-pills.centered > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs.centered, .nav-pills.centered {
    text-align:center;
}

To use it, add "centered" class to your tabs element

<ul class="nav nav-tabs centered" >
..
</ul>
捶死心动 2025-01-15 14:30:11

添加类 nav-justified 对我有用。这不仅使选项卡居中对齐,而且还可以将它们很好地分布在顶部。

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

尽管接受的答案效果很好,但我发现上述内容对于 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.

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

Even though the accepted answer works well, I found the above more natural to Bootstrap.

无法言说的痛 2025-01-15 14:30:11

添加即可

margin-left:50%;

只需在设置选项卡时

,这对我有用。例如

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">

Simply adding

margin-left:50%;

when I set up my tabs, worked for me.

For e.g.

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">
双马尾 2025-01-15 14:30:11

您可以使用 引导网格 来居中导航选项卡。由于引导网格分为 12 个等于列,因此您可以轻松使用 4 列进行导航,并具有 4 列偏移:

.

因此,您的导航位于页面中间(也是响应式解决方案),左侧和右侧各有 4 列。

我发现网格对于制作响应式网页非常有用。
祝你好运!

<div class="row-fluid">
  <div class="col-sm-12">
    <div class="col-sm-4 col-sm-offset-4">
      <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>
  </div>
</div>

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!

<div class="row-fluid">
  <div class="col-sm-12">
    <div class="col-sm-4 col-sm-offset-4">
      <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>
  </div>
</div>
无边思念无边月 2025-01-15 14:30:11

如果您简单地使用 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) add nav-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 .

怕倦 2025-01-15 14:30:11

Bootstrap 本身有一个名为 nav-justified 的类。只需像这样添加它:

<ul class="nav nav-tabs nav-justified">

如果您还想对齐

  • 的中心内容,请使其 disply: inline-block
  • ‌Bootstrap itself has a class for this regard named nav-justified. Simply add it like this:

    <ul class="nav nav-tabs nav-justified">
    

    If you want to align center content of <li> as well, make its disply: inline-block.

    活泼老夫 2025-01-15 14:30:11

    试试这个:

    <ul class="nav nav-tabs justify-content-center">
    

    Try This:

    <ul class="nav nav-tabs justify-content-center">
    
    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文