表单输入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 col。您可以在这里尝试使用新的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>