将按钮和日期时间戳对齐在一行/一行中

时间:2015-12-18 20:26:40

标签: asp.net html5 twitter-bootstrap datetimepicker

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

我想要的所有这一切。

我现在已经搞砸了好几天了,不能让他们在一排,他们到处都是。

代码:

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

像往常一样,提前谢谢。

1 个答案:

答案 0 :(得分:0)

通常在引导程序中,您只需将类form-inline放在表单元素(或包含表单元素的任何容器)上。你的其他内联样式可能正在灌输其中一些。见这个例子:

请参阅此处的小提琴https://jsbin.com/juqereyazu/edit?html,output