表单输入 100% 宽度 Bootstrap

Question

我正在创建一个表单。我有一些输入，但我对它们的尺寸有疑问。

只看图片：

我给 col 上色了，正如你所看到的，第三个输入像左右填充一样。我无法删除它，因为我不知道我必须修改哪个 class，我尝试添加一个 class "removeMargin" 并使用 CSS 我这样做了：

.removeMargin{
    margin: 0 !important;
    width: 100%;
}

这是最后输入的HTML

<div class="row mt-4">
   <div class="col-3">
     <span>Motivo de la consulta</span>
   </div>

  <div class="col-8 bg-primary">
   <input type="text" class="form-control removeMargin" >
 </div>

有没有去除边距的想法？谢谢！

Answer 1

Bootstrap 中的最大列为 12 列。您在这里尝试使用新的 HTML。

<div class="row mt-4">
   <div class="col-3">
     <span>Motivo de la consulta</span>
   </div>

  <div class="col-9 bg-primary">
   <input type="text" class="form-control removeMargin" >
 </div>

Answer 2

这不是保证金。 col-8 有填充。您可以通过这种方式删除填充。但尝试添加另一个 class 如下所示。

css 像这样

.pad-l-r-0{        
      padding-left: 0;
      padding-right: 0;
 }

html 像这样

 <div class="col-8 bg-primary pad-l-r-0">
     <input type="text" class="form-control removeMargin" >
 </div>

表单输入 100% 宽度 Bootstrap

Form input 100% width Bootstrap

html

css

margin

padding