在 Bootstrap 下控制间距答案

【问题标题】：Controlling spacing under Bootstrap在 Bootstrap 下控制间距
【发布时间】：2016-08-23 09:01:48
【问题描述】：

我正在尝试消除输入与右侧按钮之间的间距。通常，最后的手段是通过在标签中添加内联样式来覆盖所有样式，覆盖所有其他样式。但是，我注意到 (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。

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

【问题讨论】：

display: inline 元素问题？
Bootstrap 使用 media queries 来适配样式，而不是 JS。不要使用内联样式来覆盖。尽管 Bootstrap 违背了不使用 !important 作为样式属性的常见最佳实践，但 Bootstrap 团队在何时以及为何使用它方面拥有适当的经验和充分的理由。使用 !important 将覆盖内联样式。所以基本上不要使用内联样式，也不要使用!important，除非你知道自己在做什么。
您是否使用外部样式表，如果是，您是否将样式表的链接放在 Bootstrap 的样式表之后？您是否尝试过使用 CSS specificity 规则？
您是否要求从.input-group-addon 元素中删除填充？显示您的目标的简单图形将非常有帮助。如果图形比较 “这个（想要）与这个（不想要）” 会很棒。我对您要达到的目标的解释something like this。
@hungerstar 媒体查询对我来说都是新的。几年前我就看到过类似的东西，但从未在任何生产环境中接触过它。很棒的链接，我认为您应该将其发布为回复。作为答案完全可以接受。我还有一个后续问题，但我会推迟到提供答案为止。您对 wants-vs-gets 的问题也几乎是正确的。太棒了！

标签： javascript html css asp.net-mvc twitter-bootstrap

【解决方案1】：

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

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

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

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

类似：

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

演示JSFiddle.

【讨论】：