我想使四个项目居中对齐,以使链接在桌面级别居中对齐。
演示:JSFiddle
有人可以解释我如何实现这一目标吗?谢谢
jQuery(function() {
jQuery('#myTab a:last').tab('show')
})
<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>
最佳答案
使用CSS Flexbox可以轻松完成此操作。
检出更新的jsFiddle或查看下面的代码。谢谢!引导程序,使一切变得简单。
了解有关CSS Flexbox的更多信息
/* Just add the following properties to <ul> */
ul {
display: flex;
justify-content: center;
}
<!-- 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>