如何使用bootstrap3在ul中对齐社交媒体图标

时间：2015-07-07 00:22:01

标签： css html5 twitter-bootstrap-3

我正在使用Bootstrap3的navbar。在那里，我只放置了2个链接和社交媒体图标。当按下切换按钮时，我需要在视口是较小的设备（如手机或平板电脑）时使社交媒体链接内容居中。在我的片段中，社交链接出现在左侧。任何帮助将不胜感激。

＆＃13;
＆＃13; 
<!-- 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>
＆＃13; 
/*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*/


}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

在768px中加入断点media-query。为margin: 0 auto设置图标父元素的宽度。

@media (max-width: 768px) {
  #mylinks ul.nav.navbar-nav.navbar-right.nav-pills {
     width: 200px;
     margin: 0 auto;
  }
}

＆＃13;
＆＃13; 
<!-- 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>
＆＃13; 
/*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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题