问为什么Bootstrap类在某些地方不起作用？
EN

Stack Overflow用户

提问于 2022-04-06 10:00:49

回答 1查看 225关注 0票数 0

我试图将h1类添加到span中的标题文本中，也将其水平对齐，但引导类文本中心和h1不起作用。后来我找到了fs-1和mx-汽车工厂。这是由什么引起的？h1元素仅在p标记中可用吗？

<!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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>


    <div class="container">
            <nav class="navbar navbar-light mt-3 rounded border border-3 border-dark " style="background-color: black;">
                <div class="container-fluid text-center ">
                <span class="navbar-brand mb-0 h1 text-center" style="color: white; cursive;">Header</span>
                </div>
            </nav>
     </div>

   


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-06 10:46:28

您需要将navbar-brand从您的span中删除，因为这将覆盖H1的字体大小。您的span还需要一个w-100类，因为它位于一个挠曲框中，并且会自动获得尽可能小的大小。或者，您可以将类justify-content-center添加到容器中，而不是向span添加w-100。

<!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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>


    <div class="container">
            <nav class="navbar navbar-light mt-3 rounded border border-3 border-dark " style="background-color: black;">
                <div class="container-fluid text-center">
                <span class="mb-0 h1 w-100" style="color: white; cursive;">Header</span>
                </div>
            </nav>
     </div>

   


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71764709

复制

相似问题

问为什么Bootstrap类在某些地方不起作用？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Bootstrap类在某些地方不起作用？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Bootstrap类在某些地方不起作用？
EN