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