无法在 Bootstrap 框架中使用 justify-content: space-between [重复]

Question

我怎样才能让下面的 sn-p 看起来像这样：

使项目均匀分布，第一项在左侧没有空白空间，最后一项在右侧没有空白空间。类似于 MS Word 的功能：

充分理由

段落中的所有行都被扩展，因此它们对两者都很整齐 左边距和右边距。 为了扩大行，必须在单词和单词之间添加空格 字符，填写该行。

在下面的代码片段中，第一项左侧有很多紫色空间，我想删除它。

ul {
  list-style: none;
  background-color: rebeccapurple;
  color: white;
  margin: 55px 10px;
  display: flex; 
  // align-items: stretch;
  justify-content: space-between;
}
li {
  padding: 0;
  background-color: #6495ed;
}
li:nth-of-type(2n) {
  background: lightslategrey;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/dist/css/bootstrap.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
</ul>

更新

@kukkuz 下面的答案解决了代码片段，但我还必须添加以下内容才能使其与 twitter Bootstrap 一起使用。 Bootstrap 正在添加 :before 和 :after 元素，这些元素让我搞砸了。

删除它们对我有用，但我建议使用更具体的选择器 ul 否则你可能会用 Bootstrap 搞砸。

仅供参考 - 我使用的是来自这个 CDN 的 Bootstrap，v3.3.7： https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/dist/css/bootstrap.css

ul:before { 
    content: none;
}
ul:after {
    content: none;
}

Answer 1

重置ul 元素的用户代理/浏览器padding - 请参见下面的演示：

ul {
  list-style: none;
  background-color: rebeccapurple;
  color: white;
  margin: 55px 10px;
  padding: 0;
  display: flex;
  /*align-items: stretch;*/
  justify-content: space-between;
}
li {
  padding: 0;
  background-color: #6495ed;
}
li:nth-of-type(2n) {
  background: lightslategrey;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>