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

标签 css html twitter-bootstrap-3

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

<!-- 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>

最佳答案

在 media-query 中包含断点 768px。为 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/

上一篇：html - 即使在滚动时也需要背景图像将屏幕填充到底部

下一篇：html - 电子邮件中的图像问题

相关文章：

html - 试图让这个 div 在加载时旋转

javascript - 如何验证保存但不验证删除？

javascript - 如何逐个记录多个时间值

javascript - 填充 DualListBox 右侧框的所选项目

html - 计算体宽百分比的问题

JQuery - 我如何让它滚动到 div 但 -70px？

css - HTML 页面的辅助功能、选项卡和屏幕阅读器

javascript - 用于事件的参数是什么？我怎么知道？

html - 无法将工具提示与多个工具提示消息正确对齐

html - 如何为我的 li 元素设置边框

©2024 IT工具网  联系我们