Question

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

例如：https://jsfiddle.net/ccwag5ks/

HTML code：

<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>Item 0</span>
              <span>Description Item 0</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

＆GT;

Answer 1

为什么不直接将两个项目放在同一个并使用 ？

Item 0 Description Item 0

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<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>Item 0<br />Description Item 0</span>
            
            <form>
            <select class="custom-select form-control">
            <option selected>0</option>
            <option>1</option>
            <option>2</option>
            </select>
            </form>

            <form>
            <select class="custom-select form-control">
            <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>
  </div>
</div>

将小元素放在标题下面，但保持垂直对齐

1 个答案: