控制引导下的间距

Controlling spacing under Bootstrap

本文关键字：控制      更新时间：2023-09-26

我试图摆脱我的输入和右侧按钮之间的间距。通常，最后的手段是通过在标签中添加内联样式来覆盖所有样式，覆盖其他所有样式。但是，我注意到（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 中使用media queries来控制各种元素的样式。这就是为什么它们在较小的屏幕上变宽的原因。媒体查询是一项 CSS 功能。

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

注意：请不要将 Bootstrap 对!important的使用解释为使用!important全权委托的标志。在您愿意的时候使用!important被认为是违反最佳实践的。特异性应在!important前使用。一旦一个人获得了足够的经验，就像 Bootstrap 团队可能拥有的那样，那么你就会知道什么时候可以使用!important。

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

像这样：

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

演示 JSFiddle。

相关文章：