表单输入 100% 宽度 Bootstrap答案

【问题标题】：Form input 100% width Bootstrap表单输入 100% 宽度 Bootstrap
【发布时间】：2018-09-05 15:30:20
【问题描述】：

我正在创建一个表单。我有一些输入，但它们的大小有问题。

看图：

我为 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>

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

【问题讨论】：

标签： html css margin padding

【解决方案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>

【讨论】：

【解决方案2】：

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>

【讨论】：

我知道，但列实际上占用了我希望它占用的内容，而列内的内容却没有