如何在CSS / Bootstrap 4中对齐页脚项？

时间：2018-07-03 18:32:24

标签： html css bootstrap-4 inline footer

我正在研究页脚部分，其中有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。

3 个答案:

答案 0 :(得分：0)

使用引导网格。
请参见下面的示例（请在全屏视图中进行检查）

	/*---------- 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/

答案 1 :(得分：0)

您可以使用display flex 

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

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

答案 2 :(得分：0)

请检查此一项。我认为这可以解决您的问题。 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>

相关问题
最新问题