使用缩略图设置Bootstrap列表内联类的问题

Question

请您查看this demo并告诉我为什么我无法使用.list-inline

在列表中设置所有缩略图

<div class="container">
    <div class="well">
        <div class="row">
            <ul class="list-inline">
                <li class="col-md-3 col-sm-6 col-md-3">

                        <div class="thumbnail">
                            <img data-src="holder.js/300x300" alt="..." />
                            <div class="caption">
                                 <h3>Thumbnail label</h3>
                                <p>...</p>
                         <p><a href="#" class="btn btn-default" role="button">Button</a></p>
                            </div>
                        </div>

                </li>
                <li class="col-md-3 col-sm-6 col-md-3">
                            <div class="thumbnail">
                            <img data-src="holder.js/300x300" alt="..." />
                            <div class="caption">
                                 <h3>Thumbnail label</h3>

                                <p>...</p>
                             <p><a href="#" class="btn btn-default" role="button">Button</a></p>
                            </div>
                        </div>

                </li>
                <li class="col-md-3 col-sm-6 col-md-3">

                        <div class="thumbnail">
                            <img data-src="holder.js/300x300" alt="..." />
                            <div class="caption">
                                 <h3>Thumbnail label</h3>

                                <p>...</p>
                             <p><a href="#" class="btn btn-default" role="button">Button</a></p>
                            </div>
                        </div>
                </li>
            </ul>
        </div>
    </div>
</div>

正如你所看到的，我使用list-inline类和我的ul列表将所有缩略图放在一行中（并不重要）但Bootstrap仍然响应并将溢出项发送到第二行等等