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

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

//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);
 }

同样，包含其他元素的页面也有点破碎，如下面分享的屏幕截图中的数字和详细信息：Image 2，创建了两个div并尝试使用浮动左/右定位，但这并没有使它们相应地对齐（这些是屏幕分辨率的截图 - 1920 * 1080，但在少数情况下，当分辨率较小时，设计是完美的.再次移动查看，数字和旗帜都碎了）

目前来看:

Image 1:

Image 2:

预期视图:

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

另一方面，你已经给了margin-top: -4% to .headerSection1。这使得文本部分不可见。

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

我强烈建议你使用 Bootstrapcontainer-fluid, row and cols.

关于你的问题：你的1 and 10位于不同的 div 中。你可以把它们放在同一个div并定位它。