堆栈内存溢出
  繁体   English   中英

删除引导元素之间的空间

[英]Removing space between bootstrap elements

 原文  2017-03-19 08:37:35  5   4    html/ css/ twitter-bootstrap

问题描述

我正在做一个项目。 我使用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示例。

以下是它在图像中的外观：

在此输入图像描述

从上图中可以看出，搜索框左侧有一个小空间，右侧有更多空间。

我的问题是：如何从左侧和右侧移除空间？

4 个解决方案

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

您可以通过从<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"> 。

请注意，您必须完全重新排序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>

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

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

引导行包含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>

希望这可以帮助！

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

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

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

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

来自右侧的空间存在是因为col-md-5类正在添加padding: 0 15px; 。

这通常通过添加将隐藏 padding的row类来解决。 这是因为row类添加了一个margin: 0 -15px; （左和右）。 

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

下面的代码段显示了如何通过将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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 删除Bootstrap 3选项卡之间的空间 删除2个浮动元素之间的空间 删除元素之间的空白 Bootstrap导航栏-删除按钮之间的空间 使用引导程序删除两列之间的空间 删除两个图像元素之间的空格字符 列 bootstrap 5 内元素之间的相等空间 Bootstrap列元素之间的间距相等 Bootstrap 3-删除输入字段之间的太多空间，中间用短划线 删除第一列，最后一列之前和列之间的Bootstrap空间
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM