怎么能让这个div响应？

Question

css样式：

javafx.scene.control.TextField

HTML code：

我正在使用bootstrap。但是对于移动设备，我没有获得预期的输出，如下图所示。对于移动设备，我将.product-cell width设置为100％。如果有可能我们js小提琴解释。谢谢您的宝贵信息。

我需要这样：

但我会这样：

.products {
    display: inline-block;
    position: relative;
    align-items: ;
    margin-top: -4px;
}
.product-cell {
    float: left;
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
}
.product-img {
    position: relative;
}
.product-overlay {
    background: rgba(0, 0, 0, 0.73);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
}
p.product-name {
    position: absolute;
    top: 40%;
    color: #fff;
    z-index: 2;
    left: 38%;
    font-family: 'Kaushan Script', cursive;
    transform: translate(-30%,40%);
    font-size: 30px;
}
.product-list {
    padding: 5px 0px 0px 10px;
}

Answer 1

你需要让你的网站响应，为此，我们使用一种称为媒体查询的东西，这基本上只是你的css语法中的额外标记。

一个很好的框架，因为您刚刚开始使用响应式设计，所以它将使用Bootstrap，它可以轻松定制以满足您项目的需求。

这也有助于您更好地了解流体网格系统如何整合到您的网站中。

希望这有帮助！