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

您只需要将此CSS样式添加到SPAN

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.1.8, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] Android Studio (not installed)
[✓] VS Code (version 1.31.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.

祝你好运！

Answer 2

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

要做的事情：

将类添加到<li>中： .d-flex，.justify-content-between， .align-items-center
从跨度中删除 .align-middle 和 .float-right 类（不是必需的）。

示例JS小提琴：https://jsfiddle.net/srijan1709/apbmgde2/13/

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

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

2 个答案: