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

您正在体验的部分发布是在Bootstrap中使用media queries来控制各种元素的样式。这就是为什么它们在较小的屏幕上变得更宽。媒体查询是CSS功能。

您的内联样式无法正常工作的可能原因是Bootstrap使用!important语句。

注意：请不要将Bootstrap使用!important解释为使用!important 全权委托的标志你自己。当您感觉到它时，使用!important被认为是最佳做法。 !important之前应使用Specificity。一旦获得了足够的经验，就像Bootstrap团队可能拥有的那样，那么您知道何时可以使用!important。

至于输入元素和跨度之间的间距，我并不完全清楚它是什么。我把它当作你想删除glyphicon跨度周围的一些填充。

类似的东西：

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

演示JSFiddle。

控制Bootstrap

1 个答案: