Html 响应ul列表。我该如何处理这个问题？

这是我正在做的小提琴

如何使此列完全响应，以便当屏幕尺寸变小时，我希望所有元素保持在线，而不是堆叠在彼此下方

如何解决这个问题

下面是示例标记

<div id="apologies-list">
                <ul id="apologies-list-content">
                  <li><a tabindex="-1" href="#">
                        <div class="user-avatar list-padding span12 clearfix" > 
                          <div class="span1">
                            <input class="case" name="case" type="checkbox" value="">
                          </div>
                          <div class="span2">
                            <img id="list-avatar" src="http://placehold.it/60x60" alt="" />
                          </div>
                          <div class="span6">
                            <span>Apologies initials</span>
                            <small>January 31, 2009 9:18 am</small>
                          </div>
                          <div class="span3 ">
                            <span class="badge badge-info custom-badge">2</span>
                            <i class="icon-trash"></i>
                          </div>
                        </div>
                      </a>
                  </li>
</ul>
</div>

有关CSS，请查看我的小提琴。

使用CSS媒体查询

@media screen and (max-width:400px) { #apologies-list-content li div {display:inline-block} } @媒体屏幕和屏幕（最大宽度：400px） { #道歉列表内容li div{display:inline block} }

---

你为什么还在使用BS2？