表单 <input> 不跨越表单的 100% 宽度答案

【问题标题】：form <input> not spanning 100% width of form表单 <input> 不跨越表单的 100% 宽度
【发布时间】：2019-08-06 15:48:23
【问题描述】：

当使用输入添加表单组时，输入字段不会达到表单组的 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>

您可以在this fiddle 窗口中看到我的意思，输入不会跨越卡片的 100% 宽度。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您必须添加引导 cdn/url。检查这个jsfiddle

 <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>
     </div>
   </div>
</div>

【讨论】：

是的，我已经在我的项目中得到了这个，不过谢谢
是的，我在下面发布了答案。这是我在发布之前错过的一件非常愚蠢的事情。谢谢老哥

【解决方案2】：

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

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

感谢您的回复！

【讨论】：