如何將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時，它工作正常。