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移除<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-class添加了这个小的装订线。这个排水沟通常被<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>

Answer 2

只需正确使用引导网格系统即可实现。

引导行包含12列，因此按钮使用4列，搜索框使用8列。 Bootstrap列应始终包含在行内。所以你必须创建一个行div。同时将col-xs-12提供给输入组类，使搜索栏占据8列的全宽。

工作示例

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<body>
<div style="padding-top:5px;">
<div class="row">
    <form class="form-inline">
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 pull-right" style="">
            <div class="col-xs-12 input-group input-group-sm">
                <input type="text" class="col-xs-12 form-control" placeholder="search">
                <div class="btn btn-default input-group-addon">
                    <i class="glyphicon glyphicon-search"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left">
        <div class="btn-group">
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <button id="btnAllItems btn-block" ng-click="list.getItems(list.itemsStatus[0].id);" type="button" class="btn btn-info" ng-class = "{'active' : list.currentItemsStatus.id === 1}">all</button>
            </div>
             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <button id="btnNewItems btn-block" ng-click="list.getItems(list.itemsStatus[1].id)" type="button" class="btn btn-info" ng-class = "{'active' : list.currentItemsStatus.id === 2}">new</button>
            </div>
             <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <button id="btnUpdateItems btn-block" ng-click="list.getItems(list.itemsStatus[2].id)" type="button" class="btn btn-info" ng-class = "{'active' : list.currentItemsStatus.id === 3}">update</button>
            </div>
        </div>
        </div>
    </form>
</div>
</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>


</body>

希望这有帮助！

Answer 3

这是因为您已将搜索框放在一列中，该列具有（1）基于所需列数的固定大小，以及（2）一些填充。您不需要将它放在所述列类中 - 您已经为右侧的按钮执行此操作，然后将搜索框的宽度指定为它需要的任何内容。

对于这些类型的布局，我建议你使用flexbox，所以你不要硬编码像素或百分比值。

Answer 4

右侧侧的空格存在，因为col-md-5类正在添加padding: 0 15px;。

这通常是通过添加隐藏 row的{{1}}类来解决的。发生这种情况是因为padding类正在添加row（左和右）。

margin: 0 -15px;

对于左侧的空间，我认为您希望将按钮移近搜索输入。在输入之前创建一个元素<div class="row"> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-right">  </div> </div>并将按钮移动到那里。

<div class="input-group-btn">

下面的代码段显示了如何通过将<div class="row"> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-right"> <div class="input-group input-group-sm"> <div class="input-group-btn">  </div> <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>类添加到父row并使用{{}来删除左右的空格 {1}}。

div

删除引导元素之间的空间

4 个答案: