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

Question

添加具有输入的表单组时，输入字段不会转到表单组的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%宽度。

Answer 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>   

Answer 2

弄清楚了这一点，这是我错过的一件非常基本的事情。

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

感谢您的回复！