表格输入100％宽度Bootstrap

Question

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

看看图片：

我给col着色了，正如你所看到的，第三个输入就像是左右两边的填充。我不能删除它，因为我不知道我必须修改哪个类，我尝试添加一个类“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

它不是一个保证金。 col-8有填充。你可以用这种方式删除填充。但是请尝试添加另一个类，如下所示。

像这样的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>

Answer 2

Bootstrap中的最大col是12 cols。你在这里试试新的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>