html - 使用 Bootstrap 和 Css 发布对齐元素

Question

我正在使用 bootstrap 并希望有一个水平元素列表，其中最后一项必须是进度条。我对 Css 很陌生，所以我尝试使用 list-inline css 类来实现。我的问题是进度条永远不会与其他两个元素水平对齐，但会显示在下一行中。但是，如果我不使用 class="row"和 class="col-sm-2"，则甚至不会显示进度条。

所以请你能帮我告诉我一种在同一行中显示这三个元素的方法吗？我已经尝试了这两个选项但没有成功

<ul class="list-inline">
    <li>
       item 1
    </li>
    <li>
        item 2
    </li>
    <li>
        <div class="row">
            <div class="col-sm-2"><progressbar class="progress-striped" value="progress" type="warning">{{progress}}</progressbar></div>
        </div>
    </li>
</ul>

和

<ul class="list-inline">
    <li>
       item 1
    </li>
    <li>
        item 2
    </li>
    <li>

            <progressbar class="progress-striped" value="progress" type="warning">{{progress}}</progressbar>

    </li>
</ul>

Answer 1

您还需要为列表项分配 col-*。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <ul class="list-inline">
      <div class="col-xs-5 col-sm-5">
        <li>
          item 1
        </li>
      </div>
      <div class="col-xs-5 col-sm-5">
        <li>
          item 2
        </li>
      </div>

      <div class="col-xs-2 col-sm-2">
        <progressbar class="progress-striped" value="progress" type="warning">{{progress}}</progressbar>
      </div>
  </div>
</div>