Html Boostrap搜索栏-如何删除Boostrap网格中表单元素之间的空格

这是一个水平搜索框-包含3个元素

使用boostrap网格制作

如何消除元素之间的间隙 我试过宽度：100%， 它没有填满这个专栏

<span class="row">


            <span class="col-md-3 col1">

                <button type="button" class="btn btnLocation" data-toggle="dropdown" aria-haspopup="true">

                                        <span class="glyphicon glyphicon-map-marker"></span> Location <span class="caret"></span>

                              </button>

                              <ul class="dropdown-menu">

                                  <li> <a href="#">a</a> </li>
                                  <li> <a href="#">b</a> </li>
                                  <li> <a href="#">c</a> </li>
                                  <li> <a href="#">d</a> </li>
                                  <li class="spanider" role="seperate"></li>
                                  <li><a href="#">e </a></li>


                              </ul>
            </span>

             <span class="col-md-6 col2">
               <input type="text" class="inpSearch form-control" id="search-church" placeholder="Your location (City, State, ZIP)">
            </span>





            <span class="col-md-3 col3">
                 <button class="btnLocation btn" type="submit">Search.....</button>

            </span>


        </span>

位置








搜索。。。。。

如何消除元素之间的间隙

小提琴：

---

将html文件编辑为：

<span class="row">
  <span class="col-md-3 col1 padding0">
    <button type="button" class="btn btnLocation" data-toggle="dropdown" aria-haspopup="true">
      <span class="glyphicon glyphicon-map-marker"></span> Location <span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
      <li> <a href="#">a</a> </li>
      <li> <a href="#">b</a> </li>
      <li> <a href="#">c</a> </li>
      <li> <a href="#">d</a> </li>
      <li class="spanider" role="seperate"></li>
      <li><a href="#">e </a></li>
    </ul>
  </span>

  <span class="col-md-6 col2 padding0">
    <input type="text" class="inpSearch form-control" id="search-church" placeholder="Your location (City, State, ZIP)">
  </span>
  <span class="col-md-3 col3 padding0">
    <button class="btnLocation btn" type="submit">Search.....</button>
  </span>
</span>

将此添加到css中

.row > span {
   padding: 0;
}

---

这将删除元素之间的所有间隙/间距。

您可以删除右侧和左侧的填充。例如，

padding right:0

查看@LorekBryanson谢谢

.row > span {
   padding: 0;
}