Question

我想让这个div响应，但我不知道如何制作它。我不想使用Bootstrap我想要一个简单的代码。

我有另一个问题，我想增加我试图增加的两张图像的大小，但没有结果。

initPrice = Queue()

CSS

<div class="cc-selector">
    <input id="visa" type="radio" name="credit-card" value="visa" />
    <label class="drinkcard-cc visa" for="visa"></label>
    <input id="mastercard" type="radio" name="credit-card"   value="mastercard" />
    <label class="drinkcard-cc mastercard"for="mastercard"></label>
</div>

Answer 1

Bootstrap定义了类以使布局响应。如果您不想使用bootstrap，那么您可能希望在CSS中查看媒体查询。使用媒体查询，您可以编写自己的类以进行响应式设计。例如：

@media screen and (min-width: 780px) {
    .class1{
       //define css rules on your div and images when screen size is greater than 780 px
    }
}
@media screen and (max-width: 780px) {
    .class1{
       //define css rules on your div and images when screen size is lesser than 780 px
    }
}

定义规则后，您可以将这些类添加到元素中。类似地，您可以根据需要自定义更多和不同的屏幕尺寸。如果这对您没有帮助，请在评论中告诉我。

响应div与CSS

1 个答案: