css - 如何修复HTML输入文本和按钮之间的引导距离(关于数量控制功能)

我正在使用Twitter Bootstrap为我的网站提供数量控制功能。正如您在下面的代码片段中所看到的，我希望此控件的文本输入为38px宽。当我的表格单元格的宽度小于38px时，一切正常。但是，当我放置更大的内容（例如标题）时，我的数量控制就会刹车成碎片！

因此，我的问题是：如何将引导程序输入文本和按钮之间的距离归零？

无论单元格的长度如何，我都想实现这一目标：

.quantity-style {
  text-align: center;
  min-width: 38px;
  max-width: 38px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<table border="1" style="margin-left: 50px; margin-top: 50px;">

<tr>
  <td style="padding: 10px;">
        Hello - This is a test with big title
  </td>
</tr>

<tr>
  <td style="padding: 10px;">

        <div class="input-group">

          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-number btn-sm" disabled="disabled" data-type="minus" data-field="quant[2]">
              <span class="glyphicon glyphicon-minus"></span>
            </button>
          </span>

          <input type="text" name="quant[2]" class="form-control input-number input-sm quantity-style" value="0" min="0" max="15">

          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-number btn-sm" data-type="plus" data-field="quant[2]">
              <span class="glyphicon glyphicon-plus"></span>
            </button>
          </span>

        </div>

  </td>
</tr>

</table>

最佳答案

我向所有3个元素的父级quantity-wrapper添加了一个新类[ - | 0 | + ]

然后将样式设置为所需的38px宽度

一探究竟：

.quantity-style{
  text-align: center;
  min-width: 38px;
  max-width: 38px;
}

.quantity-wrapper{
  width: 38px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<table border="1" style="margin-left: 50px; margin-top: 50px;">

<tr>
  <td style="padding: 10px;">
        Hello - This is a test with big title
  </td>
</tr>

<tr>
  <td style="padding: 10px;">

        <div class="input-group quantity-wrapper">

          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-number btn-sm" disabled="disabled" data-type="minus" data-field="quant[2]">
              <span class="glyphicon glyphicon-minus"></span>
            </button>
          </span>

          <input type="text" name="quant[2]" class="form-control input-number input-sm quantity-style" value="0" min="0" max="15">

          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-number btn-sm" data-type="plus" data-field="quant[2]">
              <span class="glyphicon glyphicon-plus"></span>
            </button>
          </span>

        </div>

  </td>
</tr>

</table>

关于css - 如何修复HTML输入文本和按钮之间的引导距离(关于数量控制功能)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36239439/