html - Bootstrap 搜索栏 - 如何删除 bootstrap 网格中表单元素之间的空格

Question

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

使用 boostrap 网格制作

如何去除元素之间的空隙我试过 width: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>

如何去除元素之间的间隙。

fiddle :
Link

Answer 1

将您的 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 文件:

.padding0{
  padding:0
}