引導寬度溢位，不適合形成內容

我在網頁上有幾個表單（使用 Bootstrap 4），它們都有一些內容溢位。我不知道如何修復它并使寬度適合表單內容。這是其中一種更簡單形式的螢屏截圖。這是其他形式的另一個螢屏截圖，以防萬一。下面是我的一些代碼。

page.html

<div class="admin_section">
    <h3>Removals</h3>

    <div class="admin_section_content container">
        <form method="post">
            <div class="form-group row">
                <label for="deleteName" class="col-sm-2 col-form-label">Remove a Menu Item</label>
                <div class="col-sm-2">
                    <input type="text" name="remove_item_name" pattern="^[a-zA-Zà-?-' ] $" maxlength="25"
                        class="form-control" id="deleteName" placeholder="Food Item Name" required>
                </div>
            </div>

            <div class="form-group row">
                <label for="removeItem" class="col-sm-2 col-form-label"></label>
                <div class="col-sm-2 text-right">
                    <button type="submit" class="btn btn-danger" id="removeItem" name="remove_item_button"
                        value="clicked">Remove Item</button>
                </div>
            </div>
        </form>

        <br><br>

        <form method="post">
            <div class="form-group row">
                <label for="deleteReceipt" class="col-sm-2 col-form-label">Refund a Receipt</label>
                <div class="col-sm-2">
                    <input type="text" name="remove_receipt_number" pattern="^\d{10}$" minlength="10" maxlength="10"
                        class="form-control" id="deleteReceipt" placeholder="Receipt Number" required>
                </div>
            </div>

            <div class="form-group row">
                <label for="removeReceipt" class="col-sm-2 col-form-label"></label>
                <div class="col-sm-2 text-right">
                    <button type="submit" class="btn btn-danger" id="removeReceipt" name="remove_receipt_button"
                        value="clicked">Refund Receipt</button>
                </div>
            </div>
        </form>
    </div>
</div>

一般的.css

.admin_section{
    margin-bottom: 1.5rem;
    margin-left: 35%;
    margin-right: auto;
}

.admin_section_content{
    font-family: 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-left: 2rem;
}

select{
    border-color: var(--bootstrap-grey);
    border-radius: 5px;
}

form{
    background-color: var(--form-grey);
    border-radius: 5px;
    padding: 15px;
}

body{
    overflow-x: hidden;
}

uj5u.com熱心網友回復：

感謝Yariel提供的額外資訊。看看如果將表單放在列中會發生什么。

<div class="col-sm-12 col-md-6">

        <form method="post">
            <div class="form-group row">
                <label for="deleteName" class="col-sm-2 col-form-label">Remove a Menu Item</label>
                <div class="col-sm-2">
                    <input type="text" name="remove_item_name" pattern="^[a-zA-Zà-?-' ] $" maxlength="25"
                        class="form-control" id="deleteName" placeholder="Food Item Name" required>
                </div>
            </div>

            <div class="form-group row">
                <label for="removeItem" class="col-sm-2 col-form-label"></label>
                <div class="col-sm-2 text-right">
                    <button type="submit" class="btn btn-danger" id="removeItem" name="remove_item_button"
                        value="clicked">Remove Item</button>
                </div>
            </div>
        </form>

</div>

```

標籤：html css 引导程序 4 溢出

上一篇：將元素縮放到像素大小

下一篇：螢屏中心不是元素的文本