Question

这是一个水平搜索框 - 包含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>

如何消除元素之间的差距。

小提琴：
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
}

Answer 2

在你的css中添加这个

.row > span {
   padding: 0;
}

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

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

2 个答案: