如何在 css/Bootstrap 4 中对齐页脚项目？答案

【问题标题】：How to align footer items in line in css/Bootstrap 4?如何在 css/Bootstrap 4 中对齐页脚项目？
【发布时间】：2018-07-03 18:32:23
【问题描述】：

我正在处理具有Social Media Icons 和Contact Us 部分的页脚部分。

这是fiddle。此时此刻，Contact Us 和 Social Media Icons 在单独的行中，而不是 inline。

我用来放置Social Media Icons和Contact Us内容的HTML代码是：

<div class="fixed-bottom footer_fixed">
  <p class="mx-0 mb-2 mt-2 text-center">
    <i class="fas fa-phone pr-1"></i>
    <a href="tel:+1234567890" class="pr-3">
          +1 234 456 7890
          </a>
    <span class="static-email">
          <i class="fas fa-envelope pl-3 pr-1"></i>
          <a href="mailto:helloworld@world.com">
          helloworld@world.com
          </a>
          </span>
    <ul class="social-network social-circle">
      <li><a href="https://www.facebook.com/" target="_blank" class="icoFacebook" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="https://twitter.com/" target="_blank" class="icoTwitter" title="Twitter"><i class="fab fa-twitter"></i></a></li>
      <li><a href="https://www.linkedin.com/company/" target="_blank" class="icoLinkedin" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a></li>
      <li><a href="https://www.instagram.com/" target="_blank" class="icoInstagram" title="Instagram"><i class="fab fa-instagram"></i></a></li>
    </ul>
  </p>
</div>

<br><br>

问题陈述：

我想知道我应该在小提琴中的 CSS 中进行哪些更改，以便我能够将项目（Contact Us 和 Social Media Icons）与 社交媒体图标直接对齐到一行中强>Contact Us.

【问题讨论】：

如果您正在使用引导程序，请使用引导程序网格
@Rumesh 你能给我指点一下吗？

标签： html css bootstrap-4 inline footer

【解决方案1】：

使用引导网格。
请参阅下面的示例（请在全屏视图中查看）

	/*---------- Footer -----------*/

/*
.footer
{
    background-color: #343a40;
    background:url("../images/footer_background_full.jpg");
    background-size: 100% auto;
    margin-top:30px;
}

.footer_overlay
{
    position: relative;
    background-color: #212529;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}
*/

.footer {
	color: white;
	padding-top: 44px;
	background-color: rgb(243, 243, 243);
}

.footer a {
	color: rgb(138, 138, 138);
}

.footer a:hover {
	color: #fb875c
}

.footer .menu-items a {
	padding-bottom: 15px;
}

.appstore_soon_image_wrapper {
	max-width: 140px;
	max-height: 50px;
}

.appstore_soon_image_wrapper img {
	width: 100%;
	height: 50px;
	object-fit: contain;
}

.footer_img {
	width: 155px;
	height: 45px;
}

.back_to_top a {
	color: #ff8b5a;
}

.copyrights_wrapper {
	border-top: 1px solid #666;
}

.p_copyright {
	color: #C0C0C0;
}

ul.social-network {
	list-style: none;
	display: inline;
	padding-left: 0;
	padding-right: 0;
}

ul.social-network li {
	display: inline;
	/* margin: 0 3px; */
}

.social-circle li a {
	display: inline-block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	/*border: 1px solid #C0C0C0; */
	text-align: center;
	width: 30px;
	height: 30px;
	font-size: inherit;
	background-color: transparent;
}

.social-circle li i {
	margin: 0;
	/*line-height:30px;*/
	line-height: 25px;
	text-align: center;
	color: #C0C0C0;
}

/* color of social icons on hover */

.social-network a.icoFacebook:hover i,
.social-network a.icoTwitter:hover i,
.social-network a.icoLinkedin:hover i,
.social-network a.icoInstagram:hover i {
	color: #ff8b5a;
}

.social-network a:hover {
	border-color: #ff8b5a;
}

@media only screen and (min-width: 768px) {
	.appstore_1 {
		display: block;
	}
	.appstore_2 {
		display: none;
	}
}

@media only screen and (max-width: 768px) {
	.appstore_1 {
		display: none;
	}
	.appstore_2 {
		display: block;
	}
}

/*
.footer_head
{
    color: white;
    font-size: 2rem;
    font-weight:400;
    margin-top: 25px;
}
*/

.footer_fixed {
	background-color: #343a40;
	color: #C0C0C0;
}

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	<link rel="stylesheet" href="css/footer.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

</head>

<body>
	<div class="fixed-bottom footer_fixed">


		<div class="row">
			<div class="col-md-6">

				<i class="fas fa-phone pr-1"></i>
				<a href="tel:+1234567890" class="pr-3">
					+1 234 456 7890
				</a>
				<span class="static-email">
					<i class="fas fa-envelope pl-3 pr-1"></i>
					<a href="mailto:letsRuckify@Ruckify.com">
						helloworld@world.com
					</a>
				</span>

			</div>
			<div class="col-md-6">

				<ul class="social-network social-circle">
					<li><a href="https://www.facebook.com/" target="_blank" class="icoFacebook" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
					<li><a href="https://twitter.com/" target="_blank" class="icoTwitter" title="Twitter"><i class="fab fa-twitter"></i></a></li>
					<li><a href="https://www.linkedin.com/company/" target="_blank" class="icoLinkedin" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a></li>
					<li><a href="https://www.instagram.com/" target="_blank" class="icoInstagram" title="Instagram"><i class="fab fa-instagram"></i></a></li>
				</ul>
				
			</div>
		</div>

		</p>
	</div>
</body>

</html>

要了解有关引导网格的更多信息：https://getbootstrap.com/docs/4.1/layout/grid/

【讨论】：

这里是更新后的fiddle 以及您的所有代码。我想知道我现在需要做哪些更改才能使页脚内容居中。此时，它没有居中
你在吗？
我对你的要求有点困惑。你想要链接底部的社交媒体图标吗？？
否则一切都居中会看起来不太好
内容应该是条的中心。此刻，微涨。

【解决方案2】：

你可以使用 display flex

.fixed-bottom p {
    display: flex;
    justify-content: space-between;
}

.fixed-bottom .social-network {
    display: flex;
}

【讨论】：

我想知道你是否可以在小提琴中更新我。这样，我将能够以更好的方式进行可视化。

【解决方案3】：

请检查这个。我认为它可以解决您的问题。 JSfiddle

/*---------- Footer -----------*/


/*
.footer
{
    background-color: #343a40;
    background:url("../images/footer_background_full.jpg");
    background-size: 100% auto;
    margin-top:30px;
}

.footer_overlay
{
    position: relative;
    background-color: #212529;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}
*/

.footer {
  color: white;
  padding-top: 44px;
  background-color: rgb(243, 243, 243);
}

.footer a {
  color: rgb(138, 138, 138);
}

.footer a:hover {
  color: #fb875c
}

.footer .menu-items a {
  padding-bottom: 15px;
}

.appstore_soon_image_wrapper {
  max-width: 140px;
  max-height: 50px;
}

.appstore_soon_image_wrapper img {
  width: 100%;
  height: 50px;
  object-fit: contain;
}

.footer_img {
  width: 155px;
  height: 45px;
}

.back_to_top a {
  color: #ff8b5a;
}

.copyrights_wrapper {
  border-top: 1px solid #666;
}

.p_copyright {
  color: #C0C0C0;
}

ul.social-network {
  list-style: none;
  display: inline;
  padding-left: 0;
  padding-right: 0;
}

ul.social-network li {
  display: inline;
  /* margin: 0 3px; */
}

.social-circle li a {
  display: inline-block;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  /*border: 1px solid #C0C0C0; */
  text-align: center;
  width: 30px;
  height: 30px;
  font-size: inherit;
  background-color: transparent;
}

.social-circle li i {
  margin: 0;
  /*line-height:30px;*/
  line-height: 25px;
  text-align: center;
  color: #C0C0C0;
}


/* color of social icons on hover */

.social-network a.icoFacebook:hover i,
.social-network a.icoTwitter:hover i,
.social-network a.icoLinkedin:hover i,
.social-network a.icoInstagram:hover i {
  color: #ff8b5a;
}

.social-network a:hover {
  border-color: #ff8b5a;
}

@media only screen and (min-width: 768px) {
  .appstore_1 {
    display: block;
  }
  .appstore_2 {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .appstore_1 {
    display: none;
  }
  .appstore_2 {
    display: block;
  }
}


/*
.footer_head
{
    color: white;
    font-size: 2rem;
    font-weight:400;
    margin-top: 25px;
}
*/

.footer_fixed {
  background-color: #343a40;
  color: #C0C0C0;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>

<body>
  <div class="fixed-bottom footer_fixed d-flex justify-content-center pt-3 pb-3">
    <p class="mx-0 m-0 text-center">
      <i class="fas fa-phone pr-1"></i>
      <a href="tel:+1234567890" class="pr-3">
                +1 234 456 7890
            </a>
      <span class="static-email">
                <i class="fas fa-envelope pl-3 pr-1"></i>
                <a href="mailto:letsRuckify@Ruckify.com">
                    helloworld@world.com
                </a>
            </span>
      <ul class="social-network social-circle m-0 ml-3">
        <li><a href="https://www.facebook.com/" target="_blank" class="icoFacebook" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="https://twitter.com/" target="_blank" class="icoTwitter" title="Twitter"><i class="fab fa-twitter"></i></a></li>
        <li><a href="https://www.linkedin.com/company/" target="_blank" class="icoLinkedin" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a></li>
        <li><a href="https://www.instagram.com/" target="_blank" class="icoInstagram" title="Instagram"><i class="fab fa-instagram"></i></a></li>
      </ul>
    </p>
  </div>
</body>

</html>

【讨论】：

你的小提琴看起来不错，但我决定按照 Ramesh 的建议使用网格系统。这是更新的fiddle。我想知道我现在需要做哪些更改才能使页脚内容居中。此时，它没有居中。
@Manoj Kumar 答案看起来很棒。我一定会使用它。另外，我使用 Bootstrap Grid 系统来解决我的问题。这是带有引导网格系统的fiddle。我想知道是否有任何方法可以将内容对齐在中心。此时，内容不在中心。