在屏幕右上角显示引导卡答案

【问题标题】：Display bootstrap card on top right of the screen在屏幕右上角显示引导卡
【发布时间】：2022-01-24 14:28:51
【问题描述】：

如何将我的引导卡移动到屏幕的右上角？

这是我当前的 html 代码（它的一个 sn-p）：

<div class="card-text" style="max-width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">{{c.Name}} {{c.Surname}}</h5>
        <p class="card-text">{{ c.role }}</p>
    </div>
</div>

我查看了引导程序的文档并尝试了几乎所有方法。有人有想法吗？

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

给你...

您必须用包装器包装您的内容并将其添加到您的 CSS：

#wrapper {
    position: absolute;
    top: 0;
    right: 0;
}

请参阅下面的 sn-p。

#wrapper {
  position: absolute;
  top: 0;
  right: 0;
}

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

</head>

<body>

  <div id='wrapper'>
    <div class='card-text' style='max-width: 18rem;'>
      <div class='card-body'>
        <h5 class='card-title'>{{c.Name}} {{c.Surname}}</h5>
        <p class='card-text'>{{ c.role }}</p>
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：

我有多个css文件，需要添加到哪里？
只需将其添加到您现有的 CSS 文件之一。哪一个都无所谓，只要你把这个 CSS 文件添加到你的 HTML 中就可以了。
好的，所以假设我在 static/admin/css/example.css 中有一个名为“example.css”的 css 文件我必须添加吗？ ?因为那不起作用：s
您的 HTML 位于何处？在与“example.css”相同的文件夹中？小心，将href= "static.admin/css/example.css" 更改为href= "static/admin/css/example.css"。你应该有一个斜线，而不是一个点。
不，我的 html 位于 app/templates/example.html 上，而我的示例 css 位于根目录下的 static/admin/css/nav_sidebar.css

【解决方案2】：

您可以通过将其放入包装中来移动它。如果您不想将其添加到 CSS 中，您可以将其放在 HTML 头部的样式标签中。

    <!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
          <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
          <style>
             #wrapper {
             position: absolute;
             top: 0;
             right: 0;
             }
          </style>
       </head>
       <body>
          <div id='wrapper'>
             <div class="card" style="width: 18rem;">
                <div class='card-text' style='max-width: 18rem;'>
                   <img src="..." class="card-img-top" alt="...">
                   <div class='card-body'>
                      <h5 class='card-title'>{{c.Name}} {{c.Surname}}</h5>
                      <p class='card-text'>{{ c.role }}</p>
                   </div>
                </div>
             </div>
          </div>
       </body>
    </html>

【讨论】：