在一行/一行中對齊按鈕和日期時間選擇器

Question

我想有兩個日期時間選擇器，並且某些按鈕排成一行。 我希望行上的日期時間選擇器在左側，按鈕在右側對齊。

我想要的所有這些都是一排的。

我已經搞混了幾天了，無法將它們放在一行中，它們無處不在。

編碼：

<div class="container">
    <div class="row">
        <div class="col-sm-6" style="height: 75px;">
            <div class="col-md-5">
                <div class="form-control">
                    <div class='input-group date' id='datetimepickerFrom' style="cursor: pointer; width: 200px;">
                        <input type="text" id="DateFrom" runat="server" class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>

                    <div class='input-group date' id='datetimepickerTo' style="cursor: pointer; width: 200px;">
                        <input type="text" id="DateTo" runat="server" class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>

                    <asp:Button ID="btnYesterday" runat="server" Text="Yesterday" class="btn btn-primary"
                        OnClick="btnYesterday_Click" Style="margin-top: 50px; width: 100px;" />
                    <asp:Button ID="btnWeek" runat="server" Text="Week" class="btn btn-primary"
                        OnClick="btnWeek_Click" Style="margin-top: 50px; margin-left: 20px; width: 100px;" />
                    <asp:Button ID="btnMonth" runat="server" Text="Month" class="btn btn-primary"
                        OnClick="btnMonth_Click" Style="margin-top: 50px; margin-left: 20px; width: 100px;" />
                </div>
            </div>
        </div>
    </div>
</div>

和往常一樣，在此先感謝。

Answer 1

通常，在引導程序中，您只需將class form-inline放在您的form元素（或包含您form元素的任何容器）上。 您的其他內聯樣式可能正在完善其中一些。 請參閱以下示例：

在這里查看小提琴https://jsbin.com/juqereyazu/edit?html，輸出