响应能力在小屏幕和 XS 屏幕上不起作用

Question

我必须创建这样的内容，但是当我切换到不同的屏幕时它没有响应。 我附上了较小屏幕尺寸的屏幕截图，您可以看到元素是重叠的。 在 xs 上，中小屏幕 - 还请让我知道我应该做哪些改变才能使其完美？我是新的 UI 开发人员。预先感谢。

小 - 中等 -

大-

特大-

HTML 代码 -

<div class="container-fluid p-0 overflow-hidden">
  <div class="row px-2 py-1">
    <div class="col-xl-7 col-lg-6 col-md-5 col-sm-5 col-6 mainFirst">
      <div class="div1">
        <div class="heading1">Solution Number</div>
        <div class="content1">
          ISX0067537-001
          <img class="ml-10" src="/assets/images/myImage.png" alt="My Image" />
        </div>
      </div>

      <div class="div3">
        <div class="heading1">Solution Name</div>
        <div class="content1">My Solution 67537...</div>
      </div>
    </div>
    <div
      class="col-xl-5 col-lg-6 col-md-7 col-sm-7 col-6 secondMainDiv ml-auto"
    >
      <div class="lto">LTO</div>
      <div class="div5">
        <i class="fa fa-history hisIcon"></i>
        12 days
      </div>

      <div class="usd">USD</div>
      <div class="div7">013232440.00</div>
      <div class="div">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="25"
          viewBox="0 0 24 25"
          fill="none"
        >
          <path
            d="M8 18.5C6.9 18.5 6.01 19.4 6.01 20.5C6.01 21.6 6.9 22.5 8 22.5C9.1 22.5 10 21.6 10 20.5C10 19.4 9.1 18.5 8 18.5ZM2 2.5V4.5H4L7.6 12.09L6.25 14.54C6.09 14.82 6 15.15 6 15.5C6 16.6 6.9 17.5 8 17.5H20V15.5H8.42C8.28 15.5 8.17 15.39 8.17 15.25L8.2 15.13L9.1 13.5H16.55C17.3 13.5 17.96 13.09 18.3 12.47L21.88 5.98C21.96 5.84 22 5.67 22 5.5C22 4.95 21.55 4.5 21 4.5H6.21L5.27 2.5H2ZM18 18.5C16.9 18.5 16.01 19.4 16.01 20.5C16.01 21.6 16.9 22.5 18 22.5C19.1 22.5 20 21.6 20 20.5C20 19.4 19.1 18.5 18 18.5Z"
            fill="#626469"
          />
          <path
            d="M23 7C23 10.0376 20.5376 12.5 17.5 12.5C14.4624 12.5 12 10.0376 12 7C12 3.96243 14.4624 1.5 17.5 1.5C20.5376 1.5 23 3.96243 23 7Z"
            fill="#DC0A0A"
          />
          <path
            d="M15.7188 9.75002V8.93752L17.6172 7.17971C17.7786 7.02346 17.9141 6.88283 18.0234 6.75783C18.1345 6.63283 18.2188 6.51044 18.276 6.39065C18.3333 6.26912 18.362 6.13804 18.362 5.99742C18.362 5.84117 18.3264 5.70662 18.2552 5.59377C18.184 5.47919 18.0868 5.39151 17.9635 5.33075C17.8403 5.26825 17.7005 5.237 17.5443 5.237C17.3811 5.237 17.2387 5.26999 17.1172 5.33596C16.9957 5.40193 16.9019 5.49655 16.8359 5.61981C16.77 5.74308 16.737 5.88978 16.737 6.05992H15.6667C15.6667 5.71096 15.7457 5.40801 15.9036 5.15106C16.0616 4.89412 16.283 4.69533 16.5677 4.55471C16.8524 4.41408 17.1806 4.34377 17.5521 4.34377C17.934 4.34377 18.2665 4.41148 18.5495 4.5469C18.8342 4.68058 19.0556 4.86634 19.2135 5.10419C19.3715 5.34203 19.4505 5.6146 19.4505 5.9219C19.4505 6.12328 19.4106 6.32207 19.3307 6.51825C19.2526 6.71443 19.1128 6.93231 18.9115 7.1719C18.7101 7.40974 18.4262 7.69533 18.0599 8.02867L17.2812 8.79169V8.82815H19.5208V9.75002H15.7188Z"
            fill="#FAFAFA"
          />
        </svg>
        <div class="div fa fa-angle-down" style="margin-right: -11px"></div>
      </div>
      <button type="button" class="btn divButton">
        <span class="btnLabel">Go to Design Portal</span>
      </button>
    </div>
  </div>
</div>

相应CSS-

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container-fluid
{
        width: auto;
        height: 53px;
        padding: 5px 10px;
        background: #FFF;
                    /* Elevation / 03 dp */
            box-shadow: 0px 1px 3px 0px rgba(51, 51, 51, 0.14), 0px 2px 4px 0px rgba(51, 51, 51, 0.12), 0px 1px 5px 0px rgba(51, 51, 51, 0.14);
}
.heading1
{
    color: var(--greyscale-se-dark-grey-626469, #626469);
    
        /* Paragraph/P-Nano-Regular-12|15 */
        font-family: Nunito;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        /* 166.667% */
}
.content1
{
    color: var(--greyscale-se-dark-grey-626469, #626469);
        font-family: Nunito;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        /* 156.25% */
}
.mainFirst
{
    display: flex;
}

.div3
{
    margin-left:10px;
}



.lto
{
    color: var(--greyscale-medium-grey-9-fa-0-a-4, #9FA0A4);
        text-align: right;
        /* Headings/P-Bold-14|20 */
        font-family: Nunito;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        margin-left: 10px;
        
        /* 142.857% */
}

.hisIcon
{
    margin-left: -10px;
    padding: 0 auto;
}
.div5
{
    color: var(--se-green-super-life-green-24-b-43-f, #24B43F);
    
        /* Paragraph/P-Small-Bold-14|20 */
        font-family: Nunito;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        /* 142.857% */
}
.usd
{
    color: var(--greyscale-medium-grey-9-fa-0-a-4, #9FA0A4);
        text-align: right;
    
        /* Headings/P-Bold-14|20 */
        font-family: Nunito;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        /* 142.857% */
}
.div7
{
    color: var(--se-green-super-life-green-24-b-43-f, #24B43F);
        text-align: right;
    
        /* Paragraph/P-Big-Bold-18|30 */
        font-family: Nunito;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px;
        margin-right: -16px;
        /* 166.667% */
}
.secondMainDiv
{
   display: flex;
align-content : flex-end;
justify-content: space-between;
padding: 5px;
    height: fit-content;
    align-items: baseline;
    gap :4px;
}


.divButton
{
    display: flex;
    height: 34px;
        padding: 6px 12px;
        justify-content: flex-end;
        align-items: center;
        border-radius: 2px;
        background: var(--se-green-super-life-green-24-b-43-f, #24B43F);
}
.btnLabel
{
color: var(--neutral-light-n-0, #FFF);
    text-align: right;

    /* Buttons / Button-Medium-Bold-16|Auto */
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

Answer 1

从物理现实世界的角度来思考这一点。如果您有一长排中有几件物品，它们之间有一些空格，并且想要将它们全部放在较小的一排中，那么您只有几个选择：

1. 减小物品的尺寸。例如，

   mainFirst

   的内容比

   secondMainDiv

   少，因此，也许可以为

   mainFirst

   提供“col-4”类，为

   secondMainDiv

   提供“col-8”类，这将为

   secondMainDiv

   提供更多额外空间小屏幕 (xs)。
2. 减少它们之间的空间
3. 有多行。例如，拥有

   mainFirst

   和

   secondMainDiv

   ，这可以通过“col-12”类来实现，这将使它们在超小屏幕 (xs) 上具有全宽。并且可能必须从其父 div 中删除“row”类。
4. 1、2、3的任意组合