如何使用引导程序使页脚文本居中，右侧有两个图像？

Posted 2023-03-06

【中文标题】如何使用引导程序使页脚文本居中，右侧有两个图像？

【英文标题】：How to make footer text in center with two images on the right with bootstrap?

【发布时间】：2021-01-31 20:11:25

【问题描述】：

我需要一些关于页面页脚的帮助。我想让页脚中的文本居中，页脚右侧有两个图像。提前谢谢你。

Footer

这是我的代码：

<div class="CopyRightFooter">
  <div class="col-md-7 col-lg-8">
    <p class="text-center FooterText text-md-center">©Copyright</p>
  </div>
  <div class="col-md-5 col-lg-4 ml-lg-0">
    <div class="text-md-center">
      <ul class="list-unstyled list-inline">
        <li class="list-inline-item"> <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="footerImg" > </a> </li>
        <li class="list-inline-item"> <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="footerImg" > </a> </li>
      </ul>
    </div>
  </div>
</div>

【问题讨论】：

嗨！如果您使用的是引导程序，只需将类 align-item-center 添加到父类 .row 即可。

这是我现在卡住的地方 imgur.com/a/vkTZF2S 。文本在它自己的方格中对齐，但与网站的其他部分相比没有对齐。

【参考方案1】：

.row 
  background: #2f405a;


.FooterText,
.social-links ul 
  margin-bottom: 0;


.social-links 
  position: absolute;
  right: 0;
  width: auto;
  height: 100%;
  display: flex;
  /* to center social links */
  align-items: center;
  /* to vertically center the text */
  justify-content: center;
  /* to horizontally center the text */


@media only screen and (max-width:767px) 
  .FooterText 
    color: #fff;
    padding-right: 90px;
    /* width of social links */
  

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="row position-relative">
  <div class="col-md-12">
    <p class="text-center FooterText text-md-center">©Copyright Lorem Ipsum is simply dummy text of the printing</p>
  </div>
  <div class="col-md-12 col-lg-4 ml-lg-0 social-links">
    <div class="text-center">
      <ul class="list-unstyled list-inline">
        <li class="list-inline-item">
          <a>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="footerImg" >
                        </a>
        </li>
        <li class="list-inline-item">
          <a>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="footerImg" >
                        </a>
        </li>
      </ul>
    </div>
  </div>
</div>

您必须使用媒体查询。

    @media only screen and (min-width:767px)  /* You can change width as you required */
.social-links 
position: absolute;
right:0;
width: auto;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row position-relative">
<div class="col-md-12">
    <p class="text-center FooterText text-md-center">©Copyright</p>
</div>
<div class="col-md-12 col-lg-4 ml-lg-0 social-links">
    <div class="text-center">
        <ul class="list-unstyled list-inline">
            <li class="list-inline-item">
                <a>
                    <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="footerImg" >
                </a>
            </li>
            <li class="list-inline-item">
                <a>
                    <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="footerImg" >
                </a>
            </li>
        </ul>
    </div>
</div>
</div>

【讨论】：

它似乎适用于文本，但两个图标之间仍有很大的空白空间。此外，当屏幕宽度小于 992 像素时，我会丢失图标。

是的，除非它是在移动设备上，否则我希望它们位于版权文本的顶部。

更改了 sn-p。请检查一次。

谢谢，但我不知道是我做错了什么还是怎么回事。这是我的页脚imgur.com/a/zjhHy0g 的截图。

社交媒体图标（instagram 和 fb）有宽度吗？

【参考方案2】：

嘿，伙计，我认为你可以做这样的事情。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
    <div class="col"></div>
    <div class="col-6 text-center">
        <p>©Copyright</p>
    </div>
    <div class="col pr-5 text-right">
      <a>
        <img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" class="pr-2" >
      </a>
      <a>
        <img src="<?php echo get_template_directory_uri(); ?>/img/fb.png" class="pl-2" >
      </a>
    </div>
</div>

如果这对你来说足够了，请告诉我。

【讨论】：

我怎样才能将图标更多地向右移动并且更少分开？它们也会在移动设备上消失。很抱歉我很挑剔，谢谢你:)

我做了一个改变，把图标分开了，你可以尝试使用 col-md, col-lg 来测试做一些改变以适应移动屏幕。