无法获得合理内容：在Bootstrap框架中工作的空间

Question

如何让以下代码段看起来像这样：

这样项目的间隔均匀，第一项在左边没有空白区域。最后一项在右边没有空格。与MS Word可以做的类似：

  

全理由

     

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

在下面的代码snippit中，第一个项目左侧有很多紫色空格，我想删除它。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

更新

下面的@kukkuz答案解决了snippit但我还必须添加以下内容才能使它与twitter Bootstrap一起使用。 Bootstrap正在添加:before＆amp; :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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;