如何使用 Bootstrap 5 在移动视图中将文本与徽标对齐？

Question

我是前端新手，我对我创建的网站的响应能力有疑问。我正在使用 Bootstrap 5。在桌面视图中，所有内容都对齐得很好，但在移动视图中，文本未与徽标正确对齐。

我已附上屏幕截图来显示问题：

这是我的 HTML 和 CSS 代码片段：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
    
    <style>
    body {
        font-family: 'Quicksand';
        background-image: url('aqua.jpg');
        background-size: cover;
        background-repeat:no-repeat;
    }
    </style>

    <title>&#x1F30A; Surf Mind & Fitness &#x1F30A;</title>
  </head>
  <body>
    <div class="px-4 py-5 my-5 text-center container-fluid">
        <img class="d-block mx-auto mb-4" src="/logo.svg" alt="Surf Mind & Fitness" width="450" height="275" style="object-fit: cover; fill: none;">

        <div class="col-lg-6 mx-auto">
          <p class="lead mb-4">Nous sommes une association basée à Brest dédiée à la préparation physique pour le surf. Nous proposons des entraînements fonctionnels spécialisés en piscine pour aider les surfeurs de tous niveaux à renforcer leur endurance et leur technique.</p>
          <p class="lead mb-4">Rejoignez-nous sur notre <a href="https://www.facebook.com/profile.php?id=61559800165819">Facebook</a> pour rester informé(e) de nos activités, événements et opportunités d'entraînement à venir.</p>
          <p class="lead mb-4">Pour plus de renseignements, contactez-nous à <a href="mailto:@[email protected]">[email protected]</a>.</p>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

我尝试过不同的 Bootstrap 类和自定义 CSS，但我似乎无法正确使用。有人可以指出可能导致移动视图错位的原因并建议解决此类问题的最佳实践吗？

预先感谢您的帮助！

Answer 1

在您的文本

div

中，您仅定义了桌面屏幕的尺寸（

col-lg-

）。为了实现您想要的效果，请为超小屏幕添加一个类（在您的情况下需要使用视口的整个宽度（12 列）。

所以你需要更改这一行：

<div class="col-lg-6 mx-auto">

对此：

<div class="col-lg-6 col-12 mx-auto">

。

P.S.：官方文档是你的朋友！

Bootstrap 5 网格系统

如何使用 Bootstrap 5 在移动视图中将文本与徽标对齐？

问题描述投票：0回答：1

1个回答

最新问题

如何使用 Bootstrap 5 在移动视图中将文本与徽标对齐？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1