Bootstrap 宽度溢出，不适合表单内容

Question

我在网页上有几个表格（利用 Bootstrap 4），所有表格都有一些内容溢出。我不知道如何修复它并使宽度适合表单内容。 Here is a screenshot of one of the simpler forms. This is another screenshot 其他形式以防有帮助。下面是我的一些代码。

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>

general.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;
}

Answer 1

感谢 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>

```

Bootstrap 宽度溢出，不适合表单内容

Bootstrap width is overflowing and not fitting to form content

html

css

overflow

bootstrap-4