如何在移动设备上对称地对齐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>