如何将多个按钮移动到右上角

Question

我有10个按钮，我想把按钮放在右上角，但我不知道该怎么做？目前我的按钮在底部，我不知道如何移动我的按钮？

我想得到这个结果，（见下文）

example

我想我需要使用 display:flex ?

你有什么想法吗？

下面是我的代码

提前感谢您的帮助和抽出时间。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
   </head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <body>
      <div class="home-content container">
         <h1 class="text-center pt-5 pb-3">Signalétique</h1>
         <div class="row pt-3 container">
            <div class="card" style="width: 100%;">
               <div class="card-body">
                  <table class="table table-hover table-striped" style="width: 60%">
                     <tbody>
                        <tr>
                           <th>Ticker</th>
                           <td>SOLB</td>
                        </tr>
                        <tr>
                           <th>Code SVM</th>
                           <td>347075</td>
                        </tr>
                        <tr>
                           <th>Code ISIN</th>
                           <td>BE00003470755</td>
                        </tr>
                        <tr>
                           <th>Genre</th>
                           <td>Actions</td>
                        </tr>
                        <tr>
                           <th>Pays d'origine</th>
                           <td>Belgique</td>
                        </tr>
                        <tr>
                           <th>Secteur économique</th>
                           <td>Matériaux</td>
                        </tr>
                        <tr>
                           <th>Devise de cotation</th>
                           <td>EUR</td>
                        </tr>
                        <tr>
                           <th>Groupe de cotation</th>
                           <td>(AO)</td>
                        </tr>
                        <tr>
                           <th>Unité de cotation</th>
                           <td>1,0000000</td>
                        </tr>
                        <tr>
                           <th>Site Internet</th>
                           <td>www.solvay.com</td>
                        </tr>
                     </tbody>
                  </table>
                  <div class="btn-group-vertical">
                     <button type="button" class="btn btn-primary mb-2 ">Best Execution</button>
                     <button type="button" class="btn btn-primary mb-2">Etat du marché</button>
                     <button type="button" class="btn btn-primary mb-2">Graphiques Historiques</button>
                     <button type="button" class="btn btn-primary mb-2">Historique des cours</button>
                     <button type="button" class="btn btn-primary mb-2">Ordre</button>
                  </div>
                  <div class="btn-group-vertical">
                     <button type="button" class="btn btn-primary mb-2 ms-2">Best Execution</button>
                     <button type="button" class="btn btn-primary mb-2 ms-2">Etat du marché</button>
                     <button type="button" class="btn btn-primary mb-2 ms-2">Graphiques Historiques</button>
                     <button type="button" class="btn btn-primary mb-2 ms-2">Historique des cours</button>
                     <button type="button" class="btn btn-primary mb-2 ms-2">Ordre</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Answer 1

需要对列进行细微调整，但这是一个解决方案：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

<body>
  <div class="home-content container">
    <h1 class="text-center pt-5 pb-3">Signalétique</h1>
    <div class="row pt-3 container">
      <div class="card" style="width: 100%;">
        <div class="card-body">
          <div class="row">
            <div class="col">
              <table class="table table-hover table-striped" style="width: 60%;">
                <tbody>
                  <tr>
                    <th>Ticker</th>
                    <td>SOLB</td>
                  </tr>
                  <tr>
                    <th>Code SVM</th>
                    <td>347075</td>
                  </tr>
                  <tr>
                    <th>Code ISIN</th>
                    <td>BE00003470755</td>
                  </tr>
                  <tr>
                    <th>Genre</th>
                    <td>Actions</td>
                  </tr>
                  <tr>
                    <th>Pays d'origine</th>
                    <td>Belgique</td>
                  </tr>
                  <tr>
                    <th>Secteur économique</th>
                    <td>Matériaux</td>
                  </tr>
                  <tr>
                    <th>Devise de cotation</th>
                    <td>EUR</td>
                  </tr>
                  <tr>
                    <th>Groupe de cotation</th>
                    <td>(AO)</td>
                  </tr>
                  <tr>
                    <th>Unité de cotation</th>
                    <td>1,0000000</td>
                  </tr>
                  <tr>
                    <th>Site Internet</th>
                    <td>www.solvay.com</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="col">
              <div class="btn-group-vertical">
                <button type="button" class="btn btn-primary mb-2">
                    Best Execution
                  </button>
                <button type="button" class="btn btn-primary mb-2">
                    Etat du marché
                  </button>
                <button type="button" class="btn btn-primary mb-2">
                    Graphiques Historiques
                  </button>
                <button type="button" class="btn btn-primary mb-2">
                    Historique des cours
                  </button>
                <button type="button" class="btn btn-primary mb-2">
                    Ordre
                  </button>
              </div>
              <div class="btn-group-vertical">
                <button type="button" class="btn btn-primary mb-2 ms-2">
                    Best Execution
                  </button>
                <button type="button" class="btn btn-primary mb-2 ms-2">
                    Etat du marché
                  </button>
                <button type="button" class="btn btn-primary mb-2 ms-2">
                    Graphiques Historiques
                  </button>
                <button type="button" class="btn btn-primary mb-2 ms-2">
                    Historique des cours
                  </button>
                <button type="button" class="btn btn-primary mb-2 ms-2">
                    Ordre
                  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 2

尝试使用 flexbox 首先使用主容器然后将其显示为 flex 并使用一些容器和项目属性你会得到你想要的显示：柔性然后继续....

如何将多个按钮移动到右上角

How to move multiple buttons to the top right

css

bootstrap-4

bootstrap-5