如何在卡头html中将下拉移动到右侧结束

Question

我在卡片头上有一个下拉列表，我需要它在右上角，我该如何将它设置在我的头上，我需要在卡片头右边的欢迎信息，如下面的图片，它在标题旁边。

​

​

Answer 1

我所做的：-

在display: "flex" justify-content: "space-between" flex-direction: row和的CSS属性中，添加了一个类到.card (自举)。

参考资料：- 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>

剪辑

Answer 2

若要将其设置在右上角，只需使用“对齐”属性，这将使元素向右对齐。

​

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

​