如何将HTML5日期输入上的下拉箭头与右侧对齐？

Question

不言而喻，我是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手动更改高度，但这不会产生所需的结果;它只是隐藏下拉列表等，并使输入无法使用。

谢谢！

Answer 1

这最终成为Bootstrap 4.0.0-alpha.6的问题。当我使用Bootstrap 4.0.0-beta时，它可以正常工作。