删除引导元素之间的空间

Question

I am working on a project. 我正在做一个项目。 I use bootstrap 3.0.0. 我使用bootstrap 3.0.0。

I have this HTML: 我有这个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>

Here is a feedler example of the code. 这是代码的feedler示例。

Here is how it looks in an image: 以下是它在图像中的外观：

As you can see from the picture above, the search box has a small space from the left side and more space from right side. 从上图中可以看出，搜索框左侧有一个小空间，右侧有更多空间。

My question is: how can I remove the space from the left and right sides? 我的问题是：如何从左侧和右侧移除空间？

Answer 1

You can have it stop align (float) right (remove the left space) by removing the pull-right from the <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-right"> . 您可以通过从<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-right">移除pull-right来使其停止对齐（浮动）（移除左侧空间） <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-right"> 。

Do note that you will have to re-order your HTML entirely to still have it show on the right side of the screen (place the forms' HTML after the menu options). 请注意，您必须完全重新排序HTML才能将其显示在屏幕的右侧（在菜单选项后放置表单的HTML）。

You can remove the small 15px padding on the right side by adding: 您可以通过添加以下内容来删除右侧的小15px padding ：

margin: 0 -15px;

to the .input-group CSS. 到.input-group CSS。 (Negative padding does not exist, hence we use negative margin to counteract the padding). （不存在负填充，因此我们使用负边距来抵消填充）。

Do note that the reason this padding exists is because the col-classes add this small gutter. 请注意，这个填充存在的原因是因为col-class添加了这个小排水沟。 This gutter is normally removed by a <div class="row"></div> surrounding it (which has a margin: 0 -15px ), which would be best practise to implement here also; 这个装订线通常被围绕它的<div class="row"></div>移除（有一个margin: 0 -15px ），这也是在这里实施的最佳做法; making your form HTML: 制作表单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

Just utilize the bootstrap grid system properly and you can achieve it. 只需正确使用引导网格系统即可实现。

A bootstrap row contains 12 columns so use 4 columns for the button and rest 8 columns for the search box. 引导行包含12列，因此按钮使用4列，搜索框使用8列。 Bootstrap columns should always be contained inside a row. Bootstrap列应始终包含在行内。 so you have to create a row div. 所以你必须创建一个行div。 also give col-xs-12 to your input-group class to make the search bar take the full width of 8 columns. 还将col-xs-12提供给输入组类，以使搜索栏占据8列的全宽。

working example 工作实例

 <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>

Hope this helps! 希望这可以帮助！

Answer 3

It's because you've placed the search box in a column, which has (1) a fixed sized, based on the number of columns you want, and (2) some padding. 这是因为您已将搜索框放在一列中，该列具有（1）基于所需列数的固定大小，以及（2）一些填充。 You need to not place it in said column class - you already do this for the buttons on the right, and then specify the width of the search box to whatever it needs to be. 您不需要将它放在所述列类中 - 您已经为右侧的按钮执行此操作，然后将搜索框的宽度指定为它需要的任何内容。

For these sorts of layouts I recommend you use flexbox though, so you don't hardcode pixel or percentage values. 对于这些类型的布局，我建议您使用flexbox，因此您不需要硬编码像素或百分比值。

Answer 4

The space from the right side exist because col-md-5 class is adding a padding: 0 15px; 来自右侧的空间存在是因为col-md-5类正在添加padding: 0 15px; . 。

This is usually solved by adding the row class which will hidden the padding . 这通常通过添加将隐藏 padding的row类来解决。 This is happening because row class is adding a margin: 0 -15px; 这是因为row类添加了一个margin: 0 -15px; (left and right). （左和右）。

<div class="row">
   <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-right">
    <!--Your content-->
   </div>
</div>

For the space from the left I think you want to move buttons closer to the search input. 对于左边的空间，我想你想要将按钮移近搜索输入。 Create a element <div class="input-group-btn"> before your input and move your buttons there. 在输入之前创建一个元素<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">
              <!-- add buttons here -->

            </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>

The snippet below shows how the space from the right and left is removed by adding row class to a parent div and using input-group-btn . 下面的代码段显示了如何通过将row类添加到父div并使用input-group-btn来删除 右侧和左侧的空格。

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div style="padding-top:5px;"> <form class="form-inline"> <div class="row"> <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 pull-right"> <div class="input-group input-group-sm"> <div class="input-group-btn"> <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> <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> </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>

删除引导元素之间的空间

问题描述

4 个解决方案

解决方案1
2 2017-03-19 08:43:55

解决方案2
2 2017-03-19 08:55:52

解决方案3
1 2017-03-19 08:42:39

解决方案4
1 2017-03-19 08:43:19

删除引导元素之间的空间

问题描述

4 个解决方案

解决方案1 2 2017-03-19 08:43:55

解决方案2 2 2017-03-19 08:55:52

解决方案3 1 2017-03-19 08:42:39

解决方案4 1 2017-03-19 08:43:19

解决方案1
2 2017-03-19 08:43:55

解决方案2
2 2017-03-19 08:55:52

解决方案3
1 2017-03-19 08:42:39

解决方案4
1 2017-03-19 08:43:19