html - 删除 Bootstrap 元素之间的空间

Question

我正在做一个元素。我使用 bootstrap 3.0.0。

我有这个 HTML:

<div style="padding-top:5px;">
    <form class="form-inline">
        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-right">
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" placeholder="search">
                <div class="btn btn-default input-group-addon">
                    <i class="glyphicon glyphicon-search"></i>
                </div>
            </div>
        </div>

        <div class="btn-group input-group-sm pull-left">
            <button id="btnAllItems" ng-click="list.getItems(list.itemsStatus[0].id);" type="button" class="btn btn-info" ng-class = "{'active' : list.currentItemsStatus.id === 1}">all</button>
            <button id="btnNewItems" ng-click="list.getItems(list.itemsStatus[1].id)" type="button" class="btn btn-info" ng-class = "{'active' : list.currentItemsStatus.id === 2}">new</button>
            <button id="btnUpdateItems" ng-click="list.getItems(list.itemsStatus[2].id)" type="button" class="btn btn-info" ng-class = "{'active' : list.currentItemsStatus.id === 3}">update</button>
        </div>
    </form>
</div>

<table class="table table-responsive table-striped" style="margin-bottom:1px!important">
    <thead>
        <tr style="background:#ADD8E6">
            <th>Area</th>
            <th>Address</th>
            <th>SIM</th>
        </tr>
    </thead>
</table>

这是一个feedler代码示例。

这是它在图像中的样子:

从上图可以看出，搜索框左侧的空间较小，右侧的空间较大。

我的问题是:如何去掉左右两边的空格？

Answer 1

您可以通过删除 pull-right 使其停止右对齐( float )(删除左侧空格)来自 <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-right"> .

请注意，您必须完全重新排列 HTML 以使其仍显示在屏幕右侧(将表单的 HTML 放在菜单选项之后)。

你可以去掉小的15px padding在右侧添加:

margin: 0 -15px; 

到.input-group CSS。 (不存在负填充，因此我们使用负边距来抵消填充)。

请注意，此填充存在的原因是因为 col 类添加了这个小间距。此排水沟通常由 <div class="row"></div> 删除围绕它(它有一个 margin: 0 -15px )，这也是在这里实现的最佳实践；制作您的表单 HTML:

<div class="row"> <!-- we add this row -->
   <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-right">
       <div class="input-group input-group-sm">
           <input type="text" class="form-control" placeholder="search">
                <div class="btn btn-default input-group-addon">
                    <i class="glyphicon glyphicon-search"></i>
                </div>
           </input>
        </div>
    </div>
</div>