设计在不同的屏幕中破碎[关闭]

Question

我设计了一个网页，其中很少有 HTML 元素没有响应。这些元素是使用jQuery 动态生成的，我相信，应该有一种方法可以让它们看起来具有响应性。 Media Queries 是一个选项，但如果可以使用 BootStrap（虽然我正在使用它，但在少数情况下，无法完美地完成设计）或自定义 CSS 以强制它们做出响应。这是在成功的Ajax 调用上创建HTML 元素的场景：

//Dynamic checkboxes as Flag For Review
$('.cbFlag').each(function () {
    $(this).hide().after('<div class="class_checkbox"></div>');
});

$('.class_checkbox').on('click', function () {
    $(this).toggle lass('checked').prev().prop('checked', $(this).is('.checked'))
}); 

我试图修复它但失败了：

.class_checkbox {
    width: 20px;
    height: 18px;
    position: fixed;
    margin-top: -5%;
    margin-left: 82%;
    background: url(https://i.ibb.co/1GnSqmp/example.png);
}

.class_checkbox.checked {
    width: 20px;
    height: 18px;
    background: url(https://i.ibb.co/jWxbHF5/example-02.png);
 }

同理，其他元素的页面有点碎，如下图数字和细节分享截图：图2中，创建了两个div，尝试使用浮动左右定位，但这并没有使它们相应地对齐（这些是屏幕分辨率的屏幕截图 - 1920 * 1080，但在少数情况下分辨率较小时，设计是完美的。再次对于移动视图，数字和标志被粉碎）

当前视图：

图片 1：

图片 2：

预期视图：

Answer 1

我检查了网站，你已经覆盖了 Bootstrap，这是一个更糟糕的解决方案。您应该保留原始 Bootstrap，然后在另一个 CSS 文件或内联样式中进行更改。

另一方面，您已将margin-top: -4% 分配给.headerSection1。这使得部分文本不可见。

您的页面没有响应。它扩展了页面的 100% 宽度。这是因为给容器赋予了负值。

我强烈建议你使用 Bootstrap 的 container-fluid、row 和 cols。

关于您的问题：您的 1 和 10 位于不同的 div 中。您可以将它们放在相同的div 中并定位。