如何使用引导程序在小屏幕或超小屏幕中居中 div答案

【问题标题】：How to center a div in small screen or extra small using bootstrap如何使用引导程序在小屏幕或超小屏幕中居中 div
【发布时间】：2020-06-18 16:25:21
【问题描述】：

我正在使用 bootstrap 4，我希望 div 在超小型 (xs) 设备的中心。看看这个

如您所见，这 2 个内容在左侧，我希望这 2 个 div 在 xs 设备的中心。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Luxo</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <link rel="stylsheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
            <link href="https://fonts.googleapis.com/css2?family=Lora:ital@0;1&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
            <link rel="stylesheet" href="styles/style.css" type="text/css">
        </head>
        <body>

            <footer class="footer-section bg-dark">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <img src="images/footer-logo.png" alt="footer-logo">
                            <p class="d-inline">All Rights Reserved.</p>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <ul class="list-unstyled list-inline mb-0 mt-3 float-md-right float-sm-right">
                                <li class="list-inline-item"><a href="#" target="_blank"><img src="images/fb-icon.png" alt="bf-icon"></a></li>
                                <li class="list-inline-item"><a href="#" target="_blank"><img src="images/tw-icon.png" alt="tw-icon"></a></li>
                                <li class="list-inline-item"><a href="#" target="_blank"><img src="images/dr-icon.png" alt="dr-icon"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    </body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可能需要通过 CSS 来完成，并向 HTML 添加一个新类。尝试在没有<style> 标签的css 文件中或在带有<style> 标签的html 中添加以下CSS 代码：

<style>
    @media only screen and (max-width: 578px) {
      .credits {
        text-align:center;
      }
    }
</style>

并将credits 类添加到周围的 div 中，如下所示：

                <div class="col-md-6 col-sm-6 col-xs-12 credits">
                    <img src="images/footer-logo.png" alt="footer-logo">
                    <p class="d-inline">All Rights Reserved.</p>
                </div>

附： CSS 中的 578px 是默认的 bootstrap xs 宽度。

【讨论】：

非常感谢先生。现在我明白了，在某些时候我需要使用媒体查询，不能一直依赖 B4 类。

【解决方案2】：

当您使用 bootstrap 4 时，其中没有包含 col-xs-* 的类，您可以只使用 col-* 例如 col-4 在超小型设备上跨越 4 宽度网格的列。

其次，这两列中的所有内容都是inline，因此您可以使用text-align:center;轻松将其居中在媒体`查询小屏幕的主div上，例如：

@media only screen and (max-width: 576px) {
  .footer-section {
    text-align: center;
  }
}

希望对你有帮助。

【讨论】：

感谢您的评论，不胜感激！ :)
乐于助人

【解决方案3】：

只需在您的<div class="col-md-6 col-sm-6 col-xs-12"> 中添加col-12。现在当屏幕小于 XS 时，它们会在中间。

【讨论】：