css - 无论文本长度如何，如何在移动设备上对称对齐 li 标签？

Question

请看这两张图片。这是我在

上查看网站时的样子

手机

桌面

我为这个列表使用了简单的 ul 和 li 标签。我如何调整对称性，以便每个 li 在手机上获得 50% 的宽度，并且所有内容在手机上看起来都是对称的。

我用的是bootstrap，如果有bootstrap解决方案就好了。

Answer 1

为什么不使用 bootstrap 网格布局？

ul {
  list-style-position: inside;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">

<div class="container-fluid">
  <ul class="row">
      <li class="col-6 col-md-2">Item 1</li>
      <li class="col-6 col-md-2">Item 2</li>
      <li class="col-6 col-md-2">Item 3</li>
      <li class="col-6 col-md-2">Item 4</li>
      <li class="col-6 col-md-2">Item 5</li>
      <li class="col-6 col-md-2">Item 6</li>
  </ul>
</div>