Question

我的bootstrap有问题。我想在列之间设置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;
}

引导程序中列之间的空格，最后一列跳转到下一行

1 个答案: