html - Bootstrap 4 垂直对齐列表组与一些文本和下拉列表

Question

我是 Bootstrap 4 的新手。我正在努力垂直对齐列表组中的某些元素。它由左侧的一些文本和右侧的下拉菜单组成。

<div class="dashboard-blocks">
  <ul class="list-group ">
    <li class="dashboard-block list-group-item">
      <span class="align-middle">Write Article/s</span>
      <span class="btn-group float-right">
        <button
          type="button"
          class="btn btn-secondary dropdown-toggle"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          ACTION
        </button>
        <span class="dropdown-menu dropdown-menu-right">
          <button class="dropdown-item" type="button">Action</button>
          <button class="dropdown-item" type="button">
            Another action
          </button>
          <button class="dropdown-item" type="button">
            Something else here
          </button>
        </span>
      </span>
    </li>

在 CSS 方面，我只是对字体/颜色/边框加上一些样式:

.dashboard-block {
 ...
  line-height: normal;
  letter-spacing: normal;
...
  padding: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
}

正如您在这里看到的“写文章”没有垂直对齐:

Answer 1

使用 flex 实用程序。由于 .float-right 它不允许垂直居中 span 元素。

<div class="dashboard-blocks">
    <ul class="list-group ">
        <li class="dashboard-block list-group-item d-flex justify-content-between align-items-center">
          <span class="align-middle">Write Article/s</span>
          <span class="btn-group">
            <button
              type="button"
              class="btn btn-secondary dropdown-toggle"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              ACTION
            </button>

          </span>
        </li>
        </ul>
        </div>

要做的事情:

1. 将类(class)添加到 <li> : .d-flex, .justify-content-between,.align-items-center
2. 从 span 中删除 .align-middle 和 .float-right 类(不需要)。

示例 JS fiddle :https://jsfiddle.net/srijan1709/apbmgde2/13/

Bootstrap 4 Flex 实用程序:https://getbootstrap.com/docs/4.0/utilities/flex/