【发布时间】：2017-11-29 19:24:41
【问题描述】：
不用说我是 HTML 和 Bootstrap 的新手。
我有这个 HTML：
<dd class="col-4">
<div class="input-group input-group-sm form-group">
<span class="input-group-addon" id="dateaddon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
<input type="date" name="resDate" class="form-control input-sm" aria-describedby="dateaddon" placeholder=".input-sm">
</div>
</dd>
<dd class="col-4">
<div class="input-group input-group-sm form-group">
<span class="input-group-addon" id="dateaddon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
<input type="time" name="resDate" class="form-control input-sm" aria-describedby="dateaddon" placeholder=".input-sm">
</div>
</dd>
这给了我这样的输出（注意日期/时间输入有多高，下拉箭头/清除按钮显示在底部而不是日期右侧）：
我的问题是如何使日期输入更小并且下拉箭头/清除按钮与输入右侧对齐？我不希望输入框那么高。
我可以使用 CSS 手动更改高度，但这并不能达到预期的效果；它只是隐藏下拉菜单等，使输入无法使用。
谢谢！
【问题讨论】：
-
你能把你的代码加到jsfiddle.net
-
@Znaneswar，我做到了：here。当然，格式在 JSFiddle 中看起来是正确的。可能是因为我添加的一些 CDN 与我在项目中使用的版本不同？
-
是的，在小提琴的地方，你正在使用什么。
-
好的，我注意到当我在 JSFiddle 中使用 cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/… 时，格式是正确的。但是，当我使用 cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/…（这是我在项目中使用的）时，它是不正确的。这可能是 alpha.6 的问题吗？请立即查看我的 JSFiddle：jsfiddle.net/22t0ubb1/#
标签： html bootstrap-4