Question

我试图有一个列表，其中有一些列表项，每个都有一个标题，如“项目0”，标题下面的<small>，在这个例子中，文本“描述项目0”，和然后在这个文本的右边“项目0”和“项目0描述”我想要一个选择菜单，在这个选择菜单的右边另一个选择菜单，如：

Item 0                                select menu       select menu   
Description Item 0

这些元素应该垂直对齐。我没有用下面的代码实现这个布局你知道如何修复吗？

工作示例：

http://jsfiddle.net/fne5xLfv/1/

“描述项目0”不在“项目0”下面，选择菜单位于不在右侧的文本下方，且元素没有垂直对齐。

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">
              <span>Item 0</span>
              <span>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>
            <li class="list-group-item">
              <span>Item 1</span>
              <span>Description Item 1</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>
            <li class="list-group-item">
              <span>Item 2</span>
              <span>Description Item 2</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>
          </ul>
        </div>

        <div class="card-footer">

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

Answer 1

这样的东西你需要什么？如果没有，请提供更多信息以及您的html和CSS尝试...

.list-group-item{
  list-style-type: none;
}

<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">
          <form>
            <label style="display:inline-block; width:150px">Item 0</label>      
            <select class="custom-select form-control" style="display:inline-block;width:200px">
              <option selected="">0</option>
              <option>1</option>
              <option>2</option>
            </select>
          </form>
          <form>
            <label style="display:inline-block; width:150px">Description Item 0</label>
            <select class="custom-select form-control" style="display:inline-block;width:200px">
              <option selected="">0</option>
              <option>1</option>
              <option>2</option>
            </select>
          </form>
        </li>
        <br>
        <li class="list-group-item">
          <form>
            <label style="display:inline-block; width:150px">Item 1</label>      
            <select class="custom-select form-control" style="display:inline-block;width:200px">
              <option selected="">0</option>
              <option>1</option>
              <option>2</option>
            </select>
          </form>
          <form>
            <label style="display:inline-block; width:150px">Description Item 1</label>
            <select class="custom-select form-control" style="display:inline-block;width:200px">
              <option selected="">0</option>
              <option>1</option>
              <option>2</option>
            </select>
          </form>
        </li>
      </ul>
    </div>
  </div>
    </div>

我做了什么：已移动Span内的form，将其更改为Label，为Label和Select添加了一些内联样式，修复宽度并使其成为内联对齐

Answer 2

嗨，我想我明白你想要的，请检查一下。

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
</head>
<body>
<div class="container py-5">
  <div class="row">
    <div class="col-sm-4">
      <div>item 0</div>
      <div>description item 0</div>
    </div>
    <div class="col-sm-4">
      <div>
        <select name="" id="">
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </div>
    <div class="col-sm-4">
      <div>
        <select name="" id="">
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row ">
    <div class="col-sm-4">
      <div>item 1</div>
      <div>description item 1</div>
    </div>
    <div class="col-sm-4">
      <div>
        <select name="" id="">
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </div>
    <div class="col-sm-4">
      <div>
        <select name="" id="">
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div>item 2</div>
      <div>description item 2</div>
    </div>
    <div class="col-sm-4">
      <div>
        <select name="" id="">
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </div>
    <div class="col-sm-4">
      <div>
        <select name="" id="">
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </div>
  </div>
</div>
</body>
</html>

所以bootstrap将你的屏幕划分为12列，当你说<div class="col-sm-4"></div>这意味着你将12个中的4列提供给这个div。

在列表项上垂直和水平对齐元素

2 个答案: