将按钮和日期时间选择器合二为一 row/line

Aligning buttons and datetimepicker in one row/line

我想让两个日期时间选择器和一些按钮排成一行。我希望行中的日期时间选择器位于左侧,按钮位于右侧。

所有这些我都想排成一行。

几天来我一直在弄乱这个,无法让它们排成一行,它们到处都是。

代码:

<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>

像往常一样,提前致谢。

通常在 bootstrap 中,您只需将 class form-inline 放在表单元素(或包含表单元素的任何容器)上。您的其他内联样式可能正在处理其中的一些。看这个例子:

在这里查看 fiddle https://jsbin.com/juqereyazu/edit?html,output