css 元件宽度变更不正确

qxgroojn 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(78)

我想创建一张卡片（使用Bootstrap），规则如下：
1.卡片的最小宽度为250 px（卡片#1 -正确渲染）
1.如果第一条线超过250 px，那么卡片应该增加它的宽度，线不应该环绕（卡片# 2 -宽度没有增加足够，线环绕）
1.如果第二行的左右部分长于250 px，则卡片应增加其宽度，行不应换行（卡片#3 -宽度不增加，行换行）
1.第三行始终换行，不应增加卡片的宽度（卡片#4 -宽度增加）

智能手机屏幕上的卡片显示也不正确。

为什么我的代码不能正常工作？

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>

<body>
  <div class="d-flex">
    <div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
      <div class="">#1 Short string</div>
      <div class="d-flex justify-content-between">
        <div>Left</div>
        <div>Right</div>
      </div>
      <div class="text-wrap">Short wrapped string</div>
    </div>
    <div class="w-100">
    </div>
  </div>

  <div class="d-flex">
    <div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
      <div class="">#2 Very very very very very very very very long string</div>
      <div class="d-flex justify-content-between">
        <div>Left</div>
        <div>Right</div>
      </div>
      <div class="text-wrap">Short wrapped string</div>
    </div>
    <div class="w-100">
    </div>
  </div>

  <div class="d-flex">
    <div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
      <div class="">#3 Short string</div>
      <div class="d-flex justify-content-between">
        <div>Left left left left</div>
        <div>Right right right right</div>
      </div>
      <div class="text-wrap">Short wrapped string</div>
    </div>
    <div class="w-100">
    </div>
  </div>

  <div class="d-flex">
    <div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
      <div class="">#4 Short string</div>
      <div class="d-flex justify-content-between">
        <div>Left</div>
        <div>Right</div>
      </div>
      <div class="text-wrap">Very very very very very very very very very very very very very very long wrapped string</div>
    </div>
    <div class="w-100">
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>

css

来源：https://stackoverflow.com/questions/76588684/incorrect-element-width-change