[英]Center align Bootstrap tab navigation
I would like to center align the four items so the links are center aligned at Desktop level. 我想使四个项目居中对齐,以使链接在桌面级别居中对齐。
Can someone explain how I achieve this? 有人可以解释我如何实现这一目标吗? Thank you
谢谢
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>
This can be done easily using CSS Flexbox . 使用CSS Flexbox可以轻松完成此操作。
Checkout the updated jsFiddle or have a look at the code below. 签出更新的jsFiddle或看看下面的代码。 Thanks!
谢谢! to Bootstrap for making everything easy.
引导程序,使一切变得简单。
Learn more about CSS Flexbox 了解有关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>
http://jsfiddle.net/5v16x68c/1/ 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;
}
Add this code to you css styles: 将此代码添加到您的CSS样式中:
.nav-tabs li {
float: none;
display: inline-block;
}
.nav-tabs {
text-align:center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.