在标题范围下方定位小跨度元素

Question

我的布局带有下面的代码，其中每个列表项都有一个标题＆＃34;项目0＆＃34;，下面有一个带有文本的小标签＆＃34;描述项目0＆＃34;然后在右边选择两个菜单。我想要布局，唯一的问题是我想要小标签＆＃34;描述项目0＆＃34;标题下方＆＃34;项目0和＃34;但它不起作用。 <br>无法正常工作，因为标题和小标题是不同的span元素。你知道怎么把小标签放在标题下面吗？＃34;项目0＆＃34;并保持元素的垂直对齐？

示例：https://jsfiddle.net/uxvh0gmj/1/

HTML：

<div class="container py-5">
  <div class="row no-gutters">
    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header">
          <h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
        </div>
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <span class="title">Item 0</span>
              <br>
              <span><small>Description Item 0</small></span>
              <form>
                <select class="custom-select form-control" style="width:100px;">
                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
              <form>
                <select class="custom-select form-control" style="width:100px;">                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
            </li>

          </ul>
        </div>
        <div class="card-footer">
          <button type="button" class="float-right btn">Next</button>
        </div>
      </div>
    </div>

CSS：

.title{
  color:gray;
  font-weight:bold;
}

Answer 1

只需将它们包装在同一div中，并保留br即可创建换行符：

.title {
  color: gray;
  font-weight: bold;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<div class="container py-5">
  <div class="row no-gutters">
    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header">
          <h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
        </div>
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <div>
                <span class="title">Item 0</span>
                <br>
                <small>Description Item 0</small>
              </div>
              <form>
                <select class="custom-select form-control" style="width:100px;">
                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
              <form>
                <select class="custom-select form-control" style="width:100px;">                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
            </li>

          </ul>
        </div>
        <div class="card-footer">
          <button type="button" class="float-right btn">Next</button>
        </div>
      </div>
    </div>

Answer 2

注意：我没有移除或添加任何东西，我只是换了他们的位置

如果您将跨度插入另一个跨度内部，它将紧挨着它，但是在它之间添加<br>它会将它放在它下面。

这是编辑过的代码：

 <div class="container py-5">
  <div class="row no-gutters">
    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header">
          <h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
        </div>
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <span class="title">Item 0<br><span>Description Item 0</span></span>
              <form>
                <select class="custom-select form-control" style="width:100px;">
                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
              <form>
                <select class="custom-select form-control" style="width:100px;">                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
            </li>

          </ul>
        </div>
        <div class="card-footer">
          <button type="button" class="float-right btn">Next</button>
        </div>
      </div>
    </div>

我所做的改变是：

<span class="title">Item 0<br><span>Description Item 0</span></span>

您可以添加此CSS代码以防止描述范围看起来像标题

.description {
    color: black;
    font-weight: normal;
}

然后只需将class="description"添加到第二个范围。

Answer 3

只需将它们包装在同一div或同一span

中

.title {
  color: gray;
  font-weight: bold;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<div class="container py-5">
  <div class="row no-gutters">
    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header">
          <h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
        </div>
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <span>
                <span class="title">Item 0</span>
                <br>
                <small>Description Item 0</small>
              </span>
              <form>
                <select class="custom-select form-control" style="width:100px;">
                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
              <form>
                <select class="custom-select form-control" style="width:100px;">                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
            </li>

          </ul>
        </div>
        <div class="card-footer">
          <button type="button" class="float-right btn">Next</button>
        </div>
      </div>
    </div>