线在HTML变化的CSS

Question

我有引导的一种形式：

<form class="form-inline"> 
      <div class="form-group barkodiK"> 
      <input type="text" class="form-control barkodi" placeholder="Barkodi"> 
      </div> 
      <div class="form-group produktiK"> 
      <datalist id='produktet'></datalist> 
      <input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti"> 
      </div> 
      <div class="form-group pershkrimiK"> 
      <datalist id='pershkrimiProdukteve'></datalist> 
      <input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi"> 
      </div> 
      <div class="form-group cmimiK"> 
      <input type="text" class="form-control cmimi" readonly placeholder="Çmimi"> 
      </div> 
     </form> 

这种形式给了我这样的结果：

但是，如果我在我的编辑线做这个改变它的变化结构还有：

<form class="form-inline"> 
      <div class="form-group barkodiK"> 
      <input type="text" class="form-control barkodi" placeholder="Barkodi"> 
      </div> 
      <div class="form-group produktiK"> 
      <datalist id='produktet'></datalist> 
      <input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti"> 
      </div><div class="form-group pershkrimiK"> 
      <datalist id='pershkrimiProdukteve'></datalist> 
      <input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi"> 
      </div> 
      <div class="form-group cmimiK"> 
      <input type="text" class="form-control cmimi" readonly placeholder="Çmimi"> 
      </div> 
     </form> 

而我有这个结果：

我甚至不知道为什么这件事会影响HTML的CSS。任何帮助？

Answer 1

因为表单输入内嵌显示，你在第二个文件中删除多余的空间，导致输入靠拢在一起：

</div><div class="form-group pershkrimiK"> 

这是它应该是什么，如果你想的箱子之间的空间：

</div> 
<div class="form-group pershkrimiK"> 

当事情以内联方式显示时，/ around元素之间的空白是可见的。