时间戳

首页 > 解决方案 > 当屏幕变小时，如何防止跨度隐藏文本？

html - 当屏幕变小时，如何防止跨度隐藏文本？

问题描述

我正在使用 bootstrap 5 制作我正在制作的表格。

我有一个在计算机屏幕上看起来像这样的文件输入元素：

在此处输入图像描述

但是当我在手机上测试它时，它看起来像这样：

在此处输入图像描述

这是代码：

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="row justify-content-end mt-1">
  <label for="totalScore" class="col-2 me-4">Total score</label>
  <input type="text" name="totalScore" id="totalScore" class="col-1" value="0/27" readonly style="width:20%;" />
</div>
<div class="row justify-content-end mt-1">
  <label for="percent" class="col-2 me-4">Percentage achieved</label>
  <input type="text" name="percent" id="percent" class="col-1" value="0%" readonly style="width:20%;" />
</div>
<div class="row ms-3 mt-3 mb-3">
  <label for="comments" class="col-2 me-5">Comments /<br/> Observations</label>
  <textarea name="comments" id="comments" rows="1" class="col-5"></textarea>
</div>
<div class="row ms-3 mt-2 mb-2">
  <label for="checkedBy" class="col-2 me-5">Checked by</label>
  <input type="text" name="checkedBy" id="checkedBy" class="col-5" />
</div>
<div class="row ms-3 mt-2 mb-2">
  <label for="intakeQuantity" class="col-2 me-5">Intake Quantity</label>
  <input type="number" name="intakeQuantity" id="intakeQuantity" class="col-5" min="0" step="1" />
</div>
<div class="row ms-3 mt-2 mb-2">
  <label for="rejectedProduct" class="col-2 me-5">Rejected Product</label>
  <input type="number" name="rejectedProduct" id="rejectedProduct" class="col-5" min="0" step="1" />
</div>
<div class="row ms-3 mt-2 mb-2">
  <label for="processed" class="col-2 me-5">Processed</label>
  <input type="number" name="processed" id="processed" class="col-5" min="0" step="1" />
</div>
<div class="row ms-3 mt-2 mb-2 imput-group">
  <label for="photo" class="col-2 me-5">Upload Photo</label>
  <span class="input-group-text col-1">JPEG Only</span>
  <input type="file" name="photo" id="photo" class="form-control col-7" style="text-align:left;width:33.5%;height:100%;" accept="image/jpeg" />
</div>
<div class="row justify-content-center m-2">
  <input type="reset" value="Cancel" class="col-1" style="width:auto;" />
</div>
<div class="row justify-content-center m-2">
  <input type="submit" value="Submit" class="col-1" style="width:auto;" />
</div>

我将如何防止跨度缩小？

标签： htmlcssbootstrap-5

解决方案

尝试添加w-100使其宽度保持 100%

推荐阅读