How to align footer items in line in css/Bootstrap 4?

问题

I am working on the footer section in which I have Social Media Icons and Contact Us section.

Here is the fiddle for it. At this moment in the fiddle, Contact Us and Social Media Icons are in separate lines not inline.

The HTML code which I have used to order to place Social Media Icons and Contact Us content is:

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

Problem Statement:

I am wondering what changes I should do in the CSS in the fiddle so that I am able to align items (Contact Us and Social Media Icons) in one single line with Social media Icons coming right to Contact Us.

回答1:

Use bootstrap grid.
See below example (please check it in full screen view)

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

To learn more about bootstrap grid : https://getbootstrap.com/docs/4.1/layout/grid/

回答2:

You could use display flex

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

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

回答3:

Please check this one. I think it solves your problem. 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>

来源：https://stackoverflow.com/questions/51160977/how-to-align-footer-items-in-line-in-css-bootstrap-4

标签

html

css

bootstrap-4

inline

footer