使用Bootstrap和Css调整项目对齐问题

时间:2015-07-02 21:13:10

标签: html css twitter-bootstrap css3

我正在使用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>

1 个答案:

答案 0 :(得分: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>