bootstrap中的列之间的空间，最后一列跳到下一行

Question

我有一个引导问题。我想在列之间设置1％的空间。如果我在下面的代码中设置它，最后一列跳转到下一行。

HTML

<div class="row text-center"> 
    <div class="col-lg-3 border"> 
     <span class="cell-name">MaxCom MM720BB</span> 
     <div class="tel"> 
     </div> 
     <span class="price-tel">1zł</span> 
     <span class="vat-tel">(1,23 z VAT)</span> 
    </div> 
    <div class="col-lg-3 border"> 
     <span class="cell-name">MaxCom MM822 black</span> 
     <div class="tel"> 
     </div> 
     <span class="price-tel">1zł</span> 
     <span class="vat-tel">(1,23 z VAT)</span> 
    </div> 
    <div class="col-lg-3 border"> 
     <span class="cell-name">Goclever Quantum 2 400</span> 
     <div class="tel"> 
     </div> 
     <span class="price-tel">1zł</span> 
     <span class="vat-tel">(1,23 z VAT)</span> 
    </div> 
    <div class="col-lg-3 border"> 
     <span class="cell-name">Nokia 230</span> 
     <div class="tel"> 
     </div> 
     <span class="price-tel">1zł</span> 
     <span class="vat-tel">(1,23 z VAT)</span> 
    </div> 
</div> 

CSS

.border { 
    border: 1px solid #cdcccc; 
    margin: 0px 1%; 
} 

Answer 1

记住，加入余量的情况下，将其添加到该元件的宽度。这个额外的宽度会将最后一个col-lg-3撞到下一行。

相反，你可以做的是在col-lg-3中添加另一个div，并在其上放置一个边框。所以，这样的事情：

HTML

<div class="row text-center"> 
    <div class="col-lg-3"> 
     <div class="border"> 
     <span class="cell-name">MaxCom MM720BB</span> 
     <div class="tel"> 
     </div> 
     <span class="price-tel">1zł</span> 
     <span class="vat-tel">(1,23 z VAT)</span> 
     </div> 
    </div> 
    <div class="col-lg-3"> 
     <div class="border"> 
     <span class="cell-name">MaxCom MM822 black</span> 
     <div class="tel"> 
     </div> 
     <span class="price-tel">1zł</span> 
     <span class="vat-tel">(1,23 z VAT)</span> 
     </div> 
    </div> 
    <div class="col-lg-3"> 
     <div class="border"> 
     <span class="cell-name">Goclever Quantum 2 400</span> 
     <div class="tel"> 
     </div> 
     <span class="price-tel">1zł</span> 
     <span class="vat-tel">(1,23 z VAT)</span> 
     </div> 
    </div> 
    <div class="col-lg-3"> 
     <div class="border"> 
     <span class="cell-name">Nokia 230</span> 
     <div class="tel"> 
     </div> 
     <span class="price-tel">1zł</span> 
     <span class="vat-tel">(1,23 z VAT)</span> 
     </div> 
    </div> 
</div> 

CSS

.border { 
    border: 1px solid #cdcccc; 
}