css - 将 Bootstrap 移动布局从一列更改为两列

Question

我需要更改此网站移动版的布局 http://ovocne-destilaty.sk/ 从一列到两列，我需要在行中有两个产品，而不是像现在在移动设备上那样，或者在 chrome 中放大 400%。 最好的方法是什么？

我试着这样做，目前是这样的:

.product-block {
    position: relative;
    width: 100%;
}

我改变了宽度:

.product-block {
    position: relative;
    width: 50%;
}

但它并没有堆叠在一起，它只是在左侧，但现在宽度还可以，但我只需要它是每行两个产品。 谢谢

Answer 1

那是因为您没有考虑空白。有几种方法可以摆脱这些。将您的 html 结构更改为:

<div class="product-block"></div><div class="product-block"></div>

彼此相邻，或者

<div class="product-block"></div><!--
--><div class="product-block"></div>

通过在 block 之间添加空注释。

确保将 .product-block 的 css 也设置为 display: inline-block。

还有其他选项，例如，您可以将父容器的字体大小设置为 0，然后为内容添加适当的字体大小。