我正在使用Bootstrap3中的navbar。我在那里放置了2个链接和社交媒体图标。当视口是较小的设备（例如电话或平板电脑）时，按下切换按钮时，我需要使社交媒体链接内容居中。在我的摘要中，社交链接显示在左侧。任何帮助将不胜感激。
<!-- Placed at the end of the document so the pages load faster -->
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > < /script>
<!-- Latest compiled and minified JavaScript -->
<script src="https:/ / maxcdn.bootstrapcdn.com / bootstrap / 3.3.5 / js / bootstrap.min.js "></script>/*css plugin for jquery content*/
.contenthover {
padding: 20px 20px 10px 20px;
}
.contenthover,
.contenthover h3,
contenthover a {
color: #fff;
}
.contenthover h3,
.contenthover p {
margin: 0 0 10px 0;
line-height: 1.4em;
padding: 0;
}
.contenthover a.mybutton {
display: block;
float: left;
padding: 5px 10px;
background: #3c9632;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.contenthover a.mybutton:hover {
background: #34742d
}
/*website*/
body {
margin: 0px;
padding: 0px;
font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
font-weight: 300;
}
.navbar-text {
margin: 0px;
}
.navbar-text > i {
color: inherit;
text-decoration: none;
}
/****************modifying bootstrap***********************/
.navbar-default {
background-color: #fff;
margin-bottom: 0px;
}
#mylinks {
display: inline;
}
#centered li {
text-align: center;
}
.nav-pills {
padding-top: 5px;
margin-left: 0px;
}
#cont-socialmedia {
margin: 0px;
padding: 0px;
text-align: center;
}
#main_cont {
Padding-top: 15px;
Padding-bottom: 15px;
background-color: pink;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: blue;
/*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: rgb(84, 5, 29);
/*BACKGROUND color for active*/
background-color: white;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: gray;
/*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: rgb(84, 5, 29);
/*Change active text color here*/
}<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Social icons -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--toggle-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mylinks" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--brand-->
<a class="navbar-brand" href="#">MILY VIDAL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="mylinks">
<ul class="nav navbar-nav" id="centered">
<li class="active"><a href="#">Portfolio<span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
<!--testing new way to put smedia-->
<ul class="nav navbar-nav navbar-right nav-pills">
<li>
<a href="#" class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
</li>
<li>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/broadmarkio" class="btn btn-social-icon btn-github">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
<!--
<div class="navbar-text">
<a class="btn btn-social-icon" title="LinkedIn" href="#"><span><i class="fa fa-linkedin"></i></span></a>
<a class="btn btn-social-icon" title="JSFiddle" href="#"><span><i class="fa fa-jsfiddle"></i></span></a>
<a class="btn btn-social-icon" title="GitHub" href="#"><span><i class="fa fa-github"></i><span></a>
</div>
-->
<!--to delete
<li><a class="rssBtn smGlobalBtn" href="#" ></a></li>
<li><a class="linkedinBtn smGlobalBtn""></a></li>
-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--navbar ends-->
</body>最佳答案
在768px中包括断点media-query。为margin: 0 auto设置图标父元素的宽度，以使其起作用。
@media (max-width: 768px) {
#mylinks ul.nav.navbar-nav.navbar-right.nav-pills {
width: 200px;
margin: 0 auto;
}
}
<!-- Placed at the end of the document so the pages load faster -->
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > < /script>
<!-- Latest compiled and minified JavaScript -->
<script src="https:/ / maxcdn.bootstrapcdn.com / bootstrap / 3.3.5 / js / bootstrap.min.js "></script>/*css plugin for jquery content*/
.contenthover {
padding: 20px 20px 10px 20px;
}
.contenthover,
.contenthover h3,
contenthover a {
color: #fff;
}
.contenthover h3,
.contenthover p {
margin: 0 0 10px 0;
line-height: 1.4em;
padding: 0;
}
.contenthover a.mybutton {
display: block;
float: left;
padding: 5px 10px;
background: #3c9632;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.contenthover a.mybutton:hover {
background: #34742d
}
/*website*/
body {
margin: 0px;
padding: 0px;
font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
font-weight: 300;
}
.navbar-text {
margin: 0px;
}
.navbar-text > i {
color: inherit;
text-decoration: none;
}
/****************modifying bootstrap***********************/
.navbar-default {
background-color: #fff;
margin-bottom: 0px;
}
#mylinks {
display: inline;
}
#centered li {
text-align: center;
}
.nav-pills {
padding-top: 5px;
margin-left: 0px;
}
#cont-socialmedia {
margin: 0px;
padding: 0px;
text-align: center;
}
#main_cont {
Padding-top: 15px;
Padding-bottom: 15px;
background-color: pink;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: blue;
/*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: rgb(84, 5, 29);
/*BACKGROUND color for active*/
background-color: white;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: gray;
/*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: rgb(84, 5, 29);
/*Change active text color here*/
}
@media (max-width: 768px) {
div#mylinks ul.nav.navbar-nav.navbar-right.nav-pills {
width: 200px;
margin: 0 auto;
}
}<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Social icons -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--toggle-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mylinks" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--brand-->
<a class="navbar-brand" href="#">MILY VIDAL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="mylinks">
<ul class="nav navbar-nav" id="centered">
<li class="active"><a href="#">Portfolio<span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
<!--testing new way to put smedia-->
<ul class="nav navbar-nav navbar-right nav-pills">
<li>
<a href="#" class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
</li>
<li>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/broadmarkio" class="btn btn-social-icon btn-github">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
<!--
<div class="navbar-text">
<a class="btn btn-social-icon" title="LinkedIn" href="#"><span><i class="fa fa-linkedin"></i></span></a>
<a class="btn btn-social-icon" title="JSFiddle" href="#"><span><i class="fa fa-jsfiddle"></i></span></a>
<a class="btn btn-social-icon" title="GitHub" href="#"><span><i class="fa fa-github"></i><span></a>
</div>
-->
<!--to delete
<li><a class="rssBtn smGlobalBtn" href="#" ></a></li>
<li><a class="linkedinBtn smGlobalBtn""></a></li>
-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--navbar ends-->
</body>关于css - 如何使用bootstrap3在ul中对齐社交媒体图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31257826/