[英]HTML Bootstrap form styling
如何使此列表向我显示文本框上方的按钮? 如
代码是:
<form id="Data" runat="server" class="p-3 mb-2 bg-primary text-dark">
<div class="form-group col">
<label for="Countries" class="control-label">Email address</label>
<asp:DropDownList name="Countries" ID="Countries" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected">
<asp:ListItem Text="<Seleccione país>" Value="0" />
</asp:DropDownList>
</div>
<div class="form-group col">
<label for="DateIn" class="control-label">Email address</label>
<asp:Textbox runat="server" TextMode="Date" name="DateIn" ID="DateIn" Text="Seleccione Fecha Devolucion">
</asp:Textbox>
</div>
<div class="form-group col">
<label for="DateOut" class="control-label">Email address</label>
<asp:Textbox runat="server" TextMode="Date" name="DateOut" ID="DateOut" Text="Seleccione Fecha Retiro">
</asp:Textbox>
</div>
<div class="form-group col">
<label for="smth" class="control-label">Email address</label>
<asp:DropDownList name="smth" ID="smth" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected">
<asp:ListItem Text="<Seleccione país>" Value="0" />
</asp:DropDownList>
</div>
</form>
目前,我的页面显示如下:
您可以使用display: flex
获取布局。 您将需要进行更多调整以使输入与样式匹配。
我做了两个帮助器类: columns
和col
。
columns
是display: flex
的容器div。 col
是div中带有flex: 1
每一列,这意味着它们将在容器中均匀分布。
form { width: 400px; background: #278339; color: #FFF; padding: 20px; } input, select { width: 100%; margin-bottom: 10px; } .columns { display: flex; } .col { flex: 1; margin-right: 15px; }
<form id="Data" runat="server" class="p-3 mb-2 bg-primary text-dark"> <div class="columns"> <div class="col"> <div class="form-group col-xs-4 col-md-4"> <label for="DateIn" class="control-label">Fecha y Horario regreso</label> <input runat="server" TextMode="Date" name="DateIn" ID="DateIn" Text="Seleccione Fecha Devolucion"> </input> </div> <div class="columns"> <div class="col"> <div class="form-group col-xs-4 col-md-4"> <select name="Countries" ID="Countries" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected"> <option Text="<Seleccione país>" Value="0" /> </select> </div> </div> <div class="col"> <div class="form-group col-xs-4 col-md-4"> <select name="Countries" ID="Countries" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected"> <option Text="<Seleccione país>" Value="0" /> </select> </div> </div> </div> </div> <div class="col"> <div class="form-group col-xs-4 col-md-4"> <label for="Countries" class="control-label">Categorias:</label> <select name="Countries" ID="Countries" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected"> <option Text="<Seleccione país>" Value="0" /> </select> </div> </div> </div> </form>
使用两rows
,一行包含两个col-6
,另一行包含两个col-3
。 我只使用了一个内联CSS样式。 如果表单位于另一个具有相同大小的元素内,则无需这样做。 否则,将其更改为通过设计的任何数字。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" /> <form class="bg-success p-4 text-white mx-auto" style="width:500px"> <div class="row"> <div class="col-6 d-flex flex-column"> <label for="DateIn">Fecha y Horario regreso</label> <input class="form-control" /> </div> <div class="col-6 d-flex flex-column"> <label for="Countries"> Categorias:</label> <select class="form-control"> <option value="">one</option> <option value="">two</option> <option value="">three</option> </select> </div> </div> <div class="row mt-4"> <div class="col-3"> <select class="form-control"> <option value="">one</option> <option value="">two</option> <option value="">three</option> </select> </div> <div class="col-3"> <select class="form-control"> <option value="">one</option> <option value="">two</option> <option value="">three</option> </select> </div> </div> </form>
跟着这些步骤
col-6
用于第一列中的两个 col
break强制最后两列换行 columns
col-3
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" /> <form class="row bg-success p-4 text-white mx-auto" style="width: 500px;"> <div class="col-6 d-flex flex-column"> <label for="DateIn">Fecha y Horario regreso</label> <input class="form-control radius-0"> </div> <div class="col-6 d-flex flex-column"> <label for="Countries"> Categorias:</label> <select class="form-control radius-0"> <option value="">one</option> <option value="">two</option> <option value="">three</option> </select> </div> <!-- Force next columns to break to new line at md breakpoint and up --> <div class="w-100 d-none d-md-block my-3"></div> <div class="col-3"> <select class="form-control radius-0"> <option value="">one</option> <option value="">two</option> <option value="">three</option> </select> </div> <div class="col-3"> <select class="form-control radius-0"> <option value="">one</option> <option value="">two</option> <option value="">three</option> </select> </div> </form>
如您所见,表单元素比img中的元素更弯曲。 如果您使用的是SCSS
更改半径。 否则,请使用CSS进行更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.