刪除引導元素之間的空間

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

這是因爲您已將搜索框放在一列中，該列具有（1）基於所需列數的固定大小以及（2）一些填充。您不需要將其放置在所述列類中 - 您已經爲右側的按鈕執行此操作，然後將搜索框的寬度指定爲所需的任何值。

對於這些佈局，我建議您使用flexbox，所以您不要硬編碼像素或百分比值。

Answer 2

從正確的方的空間存在，因爲col-md-5類正在添加一個padding: 0 15px;。

這通常是通過添加row類，其中隱藏padding。發生這種情況的原因是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>

Answer 3

你可以把它停止對齊（浮動）權從<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 pull-right">取出pull-right（卸下左側空間）。

請注意，您將不得不重新整理您的HTML，以使其仍然顯示在屏幕的右側（在菜單選項之後放置表單的HTML）。

您可以通過添加刪除右側小15px padding：

margin: 0 -15px; 

到.input-group CSS。（負填充不存在，因此我們使用負邊距來抵消填充）。

請注意，這個填充存在的原因是因爲col-classes添加了這個小的陰溝。該溝槽通常由其周圍的<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 4

只需正確使用引導網格系統，您就可以實現它。

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

希望這有助於！