在屏幕右上角显示bootstrap张卡片

Question

如何将我的 Bootstrap 卡片移动到屏幕的右上角？

这是我当前的 html 代码（其中的一个片段）：

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

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

Answer 1

给你...

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

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

请参阅下面的代码段。

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

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

在屏幕右上角显示bootstrap张卡片

Display bootstrap card on top right of the screen

html

bootstrap-4