當屏幕變小時，如何防止跨度隱藏文本？

Question

我正在使用 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>

我將如何防止跨度縮小？

Answer 1

嘗試添加w-100使其寬度保持 100%