设计在不同的屏幕中破碎 [英] Design Shattered in Different Screens

问题描述

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

//动态复选框作为审查标志$('.cbFlag').each(function () {$(this).hide().after('
');});$('.class_checkbox').on('click', function () {$(this).toggle lass('checked').prev().prop('checked', $(this).is('.checked'))});

不知何故，我试图修复它但失败了:

.class_checkbox {宽度:20px；高度:18px；位置:固定；保证金最高:-5%；左边距:82%；背景:网址(https://i.ibb.co/1GnSqmp/example.png)；}.class_checkbox.checked {宽度:20px；高度:18px；背景:网址(https://i.ibb.co/jWxbHF5/example-02.png)；}

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

当前视图:

图片 1:

图片 2:

预期视图:

解决方案

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

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

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

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

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

I designed a web page where few of the HTML elements aren't responsive. These elements are dynamically generated with jQuery and I believe, there should be a way I can make them to look responsive. Media Queries are an option but if it's possible to use BootStrap (Though I am using it but in few cases, unable to do the designs perfect) or custom CSS to force them to be responsive. Here is a scenario where HTML element is created on successful 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'))
}); 

Somehow I tried to make it fixed but failed:

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

In the same way, the page with other elements are bit shattered like the number and details sharing screenshots below: In Image 2, two divs are created and tried to use float left/right positioning, but this doesn't make them aligned accordingly (These are screenshots of screen resolution - 1920 * 1080, but in few cases when the resolution is small, the designs are perfect. Again for mobile view, the number and flag are shattered)

Current View:

Image 1:

Image 2:

Expected View:

解决方案

I've checked website, and you've overwrited Bootstrap, that's a worse solution for this. You should keep original Bootstrap, then make changes in another CSS file or inline style.

On the other hand, you have given margin-top: -4% to .headerSection1. That makes the part of text invisible.

Your page is not responsive. It extends the page's 100% width. This is because of giving negative values to containers.

I strongly recommend you to use Bootstrap's container-fluid, row and cols.

On about your question: Your 1 and 10 are in different div's. You can put them in same div and position that.

这篇关于设计在不同的屏幕中破碎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！