Question

我使用Bootstrap 3格式化一个简单的内联表单。显然我想减少这些按钮之间的间距，但不能为我的生活弄清楚如何。我尝试删除所有非bootstrap CSS，但问题仍然存在。

如何减少这些按钮之间的间距？

我的HTML

<div class="form-inline" role="form">
        <div id="instructions" ng-repeat="instruction in racing.Instructions" class="row">
            <div class="col-sm-4">
                <input type="text" name="Description" ng-model="instruction.Description" class="form-control" />
            </div>
            <div class="col-sm-3">
                <div class="btn-group" role="group" aria-label="order">
                    <button type="button"
                            class="btn btn-default btn-sm">
                        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                    </button>
                    <button type="button" class="btn btn-default btn-sm">
                        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
            <div class="col-sm-1">
                <button ng-click="removeInstruction(instruction)" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>

输出：

小提琴： http://jsfiddle.net/ppwsgchh/

Answer 1

问题在于按钮上的填充。您可以通过设置自己来修复它。这是一个有效的例子：

#instructions button.btn.btn-default.btn-sm {
    padding-bottom: 7px;
    padding-top: 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



<div class="form-inline" role="form">
  <div id="instructions" ng-repeat="instruction in racing.Instructions" class="row">
    <div class="col-sm-4">
      <input type="text" name="Description" ng-model="instruction.Description" class="form-control" />
    </div>
    <div class="col-sm-3">
      <div class="btn-group" role="group" aria-label="order">
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
        </button>
      </div>
    </div>
    <div class="col-sm-1">
      <button ng-click="removeInstruction(instruction)" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
      </button>
    </div>
  </div>
  <div id="instructions" ng-repeat="instruction in racing.Instructions" class="row">
    <div class="col-sm-4">
      <input type="text" name="Description" ng-model="instruction.Description" class="form-control" />
    </div>
    <div class="col-sm-3">
      <div class="btn-group" role="group" aria-label="order">
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
        </button>
      </div>
    </div>
    <div class="col-sm-1">
      <button ng-click="removeInstruction(instruction)" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
      </button>
    </div>
  </div>
  <div id="instructions" ng-repeat="instruction in racing.Instructions" class="row">
    <div class="col-sm-4">
      <input type="text" name="Description" ng-model="instruction.Description" class="form-control" />
    </div>
    <div class="col-sm-3">
      <div class="btn-group" role="group" aria-label="order">
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
        </button>
      </div>
    </div>
    <div class="col-sm-1">
      <button ng-click="removeInstruction(instruction)" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
      </button>
    </div>
  </div>
</div>

Answer 2

minus-sign按钮与chevron的按钮组不在同一个原因？

<div class="col-sm-3">
    <div class="btn-group" role="group" aria-label="order">
       <button type="button" class="btn btn-default btn-sm">
           <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
       </button>
       <button type="button" class="btn btn-default btn-sm">
           <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
       </button>

       <!-- Minus button added to the button group -->
       <button ng-click="removeInstruction(instruction)" class="btn btn-default btn-sm">
           <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
       </button>

    </div>
</div>

Answer 3

Bootstrap Input Groups可能会有所帮助，具体取决于您的最终需求。

＆＃13;

PHPSESSID

＆＃13;

如何减少内联表单输入之间的间距？

3 个答案: