这是可以在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（仍然不确定）。
最佳答案
您可以使用text-indent，使用媒体查询将其应用于小屏幕。
/* only for small screens */
li {
text-align: left;
text-indent: 2em; /* or any value you prefer */
}