Twitter的引导：位置列表中的元素按首字母围绕中心（几乎居中）

Question

在这里是可在jsFiddle

<style> 
    li{ 
     border:1px solid red; 
     text-align: center; 
    } 
</style> 
    <div id="outer"> 
     <ul class="list-inline"> 
      <li class="col-sm-4 col-xs-12">a</li> 
      <li class="col-sm-4 col-xs-12">bb</li> 
      <li class="col-sm-4 col-xs-12">ccccc</li> 
     </ul> 
    </div> 

它在大屏幕上的单元的中心显示文本水平和可见的码在小型设备的一列中。

地看到，在jsFiddle变动请移动竖杆上，宽度将被改变。

的问题是：

如何更改代码，使文本对齐方式：

是较大的器件相同，

但对于小型设备，它首先字母排列，但位于中心或中心附近，即从第一个字母到左边界的目的地对于所有三行文本都是相同的，并且文本不会从中心向左或向右移动屏幕宽度。

请没有如果的JavaScript可能（仍然不知道）。

Answer 1

您可以使用text-indent，使用媒体查询将其应用到小屏幕。

/* only for small screens */ 
li { 
    text-align: left; 
    text-indent: 2em; /* or any value you prefer */ 
}