Question

我想将四个项目居中对齐，以便链接在桌面级别居中对齐。

有人可以解释我是如何实现这一目标的吗？谢谢

＆＃13;

jQuery(function() {
  jQuery('#myTab a:last').tab('show')
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-target="#home" data-toggle="tab">Home</a>
  </li>
  <li><a data-target="#profile" data-toggle="tab">Profile</a>
  </li>
  <li><a data-target="#messages" data-toggle="tab">Messages</a>
  </li>
  <li><a data-target="#settings" data-toggle="tab">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home</div>
  <div class="tab-pane" id="profile">Profile</div>
  <div class="tab-pane" id="messages">Message</div>
  <div class="tab-pane" id="settings">Settings</div>
</div>

＆＃13;

Answer 1

使用 CSS Flexbox 可以轻松完成此操作。

查看更新的jsFiddle或查看下面的代码。谢谢！使用Bootstrap使一切变得简单。

详细了解CSS Flexbox

＆＃13;

/* Just add the following properties to <ul> */
ul {
  display: flex;
  justify-content: center;
}

＆＃13;

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" id="myTab">
  <li class="active">
    <a data-target="#home" data-toggle="tab">Home</a>
  </li>
  <li>
    <a data-target="#profile" data-toggle="tab">Profile</a>
  </li>
  <li>
    <a data-target="#messages" data-toggle="tab">Messages</a>
  </li>
  <li>
    <a data-target="#settings" data-toggle="tab">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home</div>
  <div class="tab-pane" id="profile">Profile</div>
  <div class="tab-pane" id="messages">Message</div>
  <div class="tab-pane" id="settings">Settings</div>
</div>

＆＃13;

Answer 2

http://jsfiddle.net/5v16x68c/1/

.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;
}

Answer 3

将此代码添加到css样式：

.nav-tabs li {
  float: none;
  display: inline-block;
}

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

中心对齐引导标签导航

3 个答案: