javascript - 在 Bootstrap 下控制间距

Question

我正在尝试消除我的输入与其右侧按钮之间的间距。通常，最后的办法是通过在标签中添加内联样式来覆盖所有样式，覆盖其他所有样式。但是，我注意到 (a) 它似乎不会影响页面，并且 (b) 对于较小的屏幕宽度，间距实际上会变大。

我基于此(以及一些 googlearch)得出的结论是，Bootstrap 使用 JavaScript 来动态设置样式以适应不同尺寸的屏幕。这很好，但它让我只能有限地控制控件的放置方式。

我猜一般来说这是一个很棒的功能，但目前我只对 Bootstrap 的外观感兴趣，而不是布局。我如何有效地覆盖它？将来我需要应用布局，这样我就不能删除它。

<div class="input-group date form_datetime col-md-5 "
     style="border: solid red 1px;" 
     data-date-format="dd M 'yy - hh:ii" 
     data-link-field="myDate">
  <input class="form-control" 
         style="border: solid yellow 1px;" 
         size="16" type="text" value="" readonly>
  <span class="input-group-addon" style="border: solid blue 1px;">
    <span class="glyphicon glyphicon-remove " 
          style="border: blueviolet 10px;">
    </span>
  </span>
  <span class="input-group-addon" style="border: solid orange 1px;">
    <span class="glyphicon glyphicon-th" 
          style="border: solid orangered 1px;"></span>
  </span>
</div>
<input type="hidden" id="myDate" value="" />

实际的问题是如何在不删除 Bootstrap 的情况下在上述标记中停用/覆盖输入和跨度之间的间距。

是否可以像交替上一门课一样简单？我已经阅读了一些指南，但并没有完全启发。可能不是因为文档有误，呵呵。

Answer 1

您遇到的部分问题是使用 media queries 在 Bootstrap 中，控制各种元素的样式。这就是为什么它们在较小的屏幕上变宽的原因。媒体查询是一种 CSS 特性。

您的内联样式不起作用的可能原因是因为 Bootstrap 使用 !important声明。

注意:请不要解释 Bootstrap 对 !important 的使用作为使用 !important 的标志全权委托(delegate)你自己。使用 !important 被认为是违反最佳实践的当你喜欢它的时候。 Specificity应该在 !important 之前使用.一旦获得足够的经验，就像 Bootstrap 团队可能拥有的那样，您就会知道什么时候可以接受使用 !important还是不是。

至于输入元素和跨度之间的间距，我不是很清楚那是什么。我认为它是因为您想删除 glyphicon 周围跨度上的一些填充跨越。

类似于:

.input-group-addon {
    padding: 6px 0;
}

演示 JSFiddle .