Как центрировать содержимое нижнего колонтитула в сетке Bootstrap 4? - PullRequest
Новая
       47

Как центрировать содержимое нижнего колонтитула в сетке Bootstrap 4?

0 голосов
/ 04 июля 2018

Я работаю над нижним колонтитулом веб-сайта, на котором я хочу центрировать его содержимое. Вот для этого скрипка . В этот момент, если мы проверяем скрипку, содержимое не точно отцентрировано .

Коды CSS, которые я использовал для размещения содержимого в нижнем колонтитуле: 

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

.contact_us
{
    text-align: right;
}


.social_media_icons
{
     text-align: left;
}



Постановка задачи:

Мне интересно, какие изменения в коде нужно внести в скрипту, чтобы центрировать содержимое скрипты в нижнем колонтитуле. Это то, что я пробовал (display:flex, align-items:center), но почему-то это не сработало. 

.footer_fixed
{
    background-color: #343a40;
    color: #C0C0C0;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

Ответы [ 5 ]

0 голосов
/ 04 июля 2018

Вы можете использовать имя класса flex с начальной загрузкой: https://getbootstrap.com/docs/4.1/utilities/flex/
Вам не нужно менять структуру CSS и HTML, просто добавьте имя класса: 

<div class="fixed-bottom footer_fixed">

<div class="d-flex pt-2 pb-2  flex-wrap flex-md-nowrap justify-content-center">
  <div class="px-3 d-flex flex-wrap justify-content-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>
  </div>
  <div class="px-3 social_media_icons">
    <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>

</div>
0 голосов
/ 04 июля 2018

Используйте justify-content-center для row и замените оба значения col-md-6 на col-md-auto. 

 <div class="row pt-2 pb-2 justify-content-center">
    <div class="col-md-auto contact_us">
    </div>
    <div class="col-md-auto social_media_icons">
    </div>
  </div>

https://jsfiddle.net/c6a0873L/1/

Кстати, использование следующих свойств не нужно, потому что col-*-auto имеет столько же ширины, сколько и его содержимое. 

.contact_us {
  text-align: right;
}

.social_media_icons {
  text-align: left;
}
0 голосов
/ 04 июля 2018

Раньше было две колонки по 50% каждая. Если вы хотите, чтобы они оба располагались по центру, вам нужно переместить ul внутрь contact div и использовать полную ширину столбца как col-12 or col-md-12, как вам нравится.

и затем настройте .contact_us { text-align: center; }

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

.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;
  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_fixed {
  background-color: #343a40;
  color: #C0C0C0;
}

.contact_us {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact_us ul.social-network {
  margin-bottom: 0px;
  height: 30px;
  display: flex;
  align-items: center;
}
<!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 pt-2 pb-2">
      <div class="col-12 contact_us">

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


  </div>
</body>

</html>
0 голосов
/ 04 июля 2018

Просто удалите эти столбцы начальной загрузки col-md-6. Для вашего удобства отрегулируйте их, используя ширину в адаптивном представлении, применяя медиазапрос. Ваш код должен быть таким: 

<!doctype html>
<html>

<head>
    <style>
     .contact_us, .social_media_icons, .email{
        display:inline-block;
    }

    @media only screen and (max-width: 768px){
        .contact_us, .social_media_icons, .email{
            display:block;
            width:100%;
        }

    }

    </style>
</head>

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


<div class="row pt-2 pb-2">
 <div class="col-lg-12 col-md-12 text-center">
    <div class="contact_us">

        <i class="fas fa-phone pr-1"></i>
        <a href="tel:+1234567890" class="pr-3">
            +1 234 456 7890
        </a>
   </div>
   <div class="email">
        <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="social_media_icons">

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


</div>
</body>

</html>
0 голосов
/ 04 июля 2018

Попробуйте это 

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


.contact_us
{
text-align: right;
}

.social_media_icons
{
text-align: left;
}
<!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 pt-2 pb-2">
    <div class="col-md-12 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">
            <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>


</div>
</body>

</html>
...