如何在CSS/Bootstrap 4中对齐页脚项? [英] How to align footer items in line in css/Bootstrap 4?

问题描述

我正在其中有Social Media Icons和Contact Us部分的页脚部分中工作.

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

这是小提琴.此时，Contact Us和Social Media Icons在单独的行中，而不是inline.

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

我用来订购Social Media Icons和Contact Us内容的HTML代码是:

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:[phone]" class="pr-3">
          [phone]
          </a>
    <span class="static-email">
          <i class="fas fa-envelope pl-3 pr-1"></i>
          <a href="mailto:[e-mail]">
          [e-mail]
          </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.

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.

推荐答案

请选中此复选框.我认为这可以解决您的问题. JSfiddle

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:[phone]" class="pr-3">
                [phone]
            </a>
      <span class="static-email">
                <i class="fas fa-envelope pl-3 pr-1"></i>
                <a href="mailto:[e-mail]">
                    [e-mail]
                </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>

这篇关于如何在CSS/Bootstrap 4中对齐页脚项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！