时间戳

首页 > 解决方案 > 形式不跨越表格的 100% 宽度

html - 形式不跨越表格的 100% 宽度

问题描述

当使用输入添加表单组时，输入字段不会达到表单组的 100% 宽度，而表单组已经是卡片的宽度。

我尝试将宽度样式直接添加到父元素和输入元素本身。

<div class="container-fluid d-flex justify-content-center">
    <div class="card d-flex justify-content-center" style="background-color:dodgerblue; height:60vh; width:40vw; border-radius:20px">
        <div class="card-body ml-4 mt-3 text-center">

                <div class="row ml-4">
                    <div class="form-group mr-5" style="display: inline-block; width: 100%; vertical-align: middle;">
                        <label for="cardNumber">Card number</label>
                        <div class="input-group">
                            <input type="text" name="cardNumber" placeholder="Your card number" class="form-control" required>
                        </div>
                    </div>
                </div>

            <a class="btn btn-primary text-center mt-3" href="">Continue</a>
        </div>
    </div>
</div>

你可以在这个小提琴窗口中看到我的意思，输入不会跨越卡片的 100% 宽度。

标签： htmlcssbootstrap-4

解决方案

想通了这一点，这是我错过的一件非常基本的事情。

默认情况下，我删除了 site.css 文件中输入的“最大宽度”。

感谢您的回复！

推荐阅读