如何强制所有元素与bootstrap css内联

Question

我有像这样的html标签，我想强制所有元素一行显示。 使用bootstrap执行此操作的最简单方法是什么？目前，页面大小位于不同的行上。

感谢

德克萨斯州奥斯汀

<div class="col-xs-12 col-md-8 form-inline">
    <span class="btn btn-primary">Page Size</span>
    <select class="form-control" style="width:80px">
        <option>20</option>
        <option>30</option>
        <option>40</option>
    </select>

    <ul class="pagination">
        <li><a href="">Previous</a></li>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">Next</a></li>
    </ul>
</div>

Answer 1

Demo

 .algn {

             margin-top: 20px;//This 20px is the margin of .pagination class so to match that else you have to alter pagination class 
             float:left;
    }

或

  .algn {

        display:inline;//and add algn class to ul tag
    }

Answer 2

我不知道是否存在基于Bootstrap的解决方案，但当然你可以通过css修复它。我的解决方案将改变其他元素的css。这会将分页margin-top，vartical-align css应用于其他元素。

<style>
.algn {
    margin-top: 20px;
    vertical-align: top;
}
</style>


<div class="col-xs-12 col-md-8 form-inline">
<span class="btn btn-primary algn">Page Size</span>
<select class="form-control algn" style="width:80px;">
    <option>20</option>
    <option>30</option>
    <option>40</option>
</select>

<ul class="pagination">
    <li><a href="">Previous</a></li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">Next</a></li>
</ul>
</div>

更新：我检查bootstrap 3.0.3版本，最新版本是3.1.1。