Question

我正在使用引导程序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>

Answer 1

您可能需要通过CSS并将其添加到HTML中。尝试在没有<style>标记的css文件中或在带有<style>标记的html中添加以下CSS代码：

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

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

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

P.S。 CSS中的578px是默认的bootstrap xs宽度。

Answer 2

在使用引导程序4时，其中不包含带有col-xs-*的类，相反，您可以仅使用col-*例如col-4将一列覆盖4个宽度的网格小型设备。

第二，由于这两列中的所有内容均为inline，因此您可以在媒体查询的主div上使用text-align:center;轻松地将其居中，例如：

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

希望有帮助。

Answer 3

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

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

3 个答案: