如何在卡片标题html中将下拉列表移动到右侧末端

Posted 2023-02-24

【中文标题】如何在卡片标题html中将下拉列表移动到右侧末端

【英文标题】：How to move dropdown to rightside end in card header html

【发布时间】：2022-01-13 08:15:36

【问题描述】：

我在卡片标题中有一个下拉菜单，我需要它在右上角我如何在我的标题中设置它。我需要在卡片标题右侧的欢迎信息，如下图它在标题旁边

【参考方案1】：

我做了什么：-

我向 .card (of bootstrap) 添加了一个类，其 CSS 属性为 display: "flex" justify-content: "space-between" 和 flex-direction: row

参考：-https://getbootstrap.com/docs/4.0/utilities/flex/

风格：-

<style>
  .card 
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    margin: 0 auto;
    float: none;
    margin-bottom: 10px;
  

  /* On mouse-over, add a deeper shadow */
  .card:hover 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  

  body 
    background-color: lightblue;
  
</style>

html:-

<div class="container-fluid" style="padding-top: 50px">
      <div class="card d-flex flex-row justify-content-between">
        <div
          class="card-header text-center"
          style="font-family: Sans-Serif; text-transform: uppercase; font-size: 1.5rem"
        >
          Project Manager Dashboard
        </div>
        <div class="btn-group dropleft">
          <button
            type="button"
            class="btn btn-outline-secondary"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            Hi, Drake
          </button>
          <div class="dropdown-menu">
            <!-- Dropdown menu links -->
            <a href="% url 'logout_view' %"
              ><button class="dropdown-item" type="button">Logout</button></a
            >
          </div>
        </div>
      </div>
    </div>

snip

【讨论】：

@ Lokesh Kabra 这不是我想要的输出，兄弟我需要所有东西都是相同的项目经理仪表板作为卡片标题，但是你的回答是它没有显示为卡片并且按钮没有完全显示如剪断右侧线

没有得到你...意味着必须做什么？

抱歉，回复晚了

【参考方案2】：

要将其设置在右上角，只需使用 align 属性即可将元素向右对齐。

<div class="container-fluid" style="padding-top: 50px;">
    <div class="card">
        <div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
           Project Manager Dashboard
           
            <div class="btn-group dropright" align="right" >
                  <!-- Dropdown menu links -->
               <a href="% url 'logout_view' %"><button class="dropdown-item" type="button">Log</button></a>
                  </div>
                  
            <div class="btn-group dropleft">
                <button type="button" class="btn btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Hi, Drake
                </button>
            </div>
   
        </div>