我正在使用 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>
最佳答案
您还需要为列表项分配 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>
关于html - 使用 Bootstrap 和 Css 发布对齐元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31194735/