将按钮和日期时间选择器合二为一 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
我想让两个日期时间选择器和一些按钮排成一行。我希望行中的日期时间选择器位于左侧,按钮位于右侧。
所有这些我都想排成一行。
几天来我一直在弄乱这个,无法让它们排成一行,它们到处都是。
代码:
<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