HTML Bootstrap表單樣式

Question

如何使此列表向我顯示文本框上方的按鈕？ 如

理想格式

代碼是：

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

目前，我的頁面顯示如下：

當前風格

Answer 1

您可以使用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> 

Answer 2

使用兩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> 

更新

跟着這些步驟

1. 排成一行
2. col-6用於第一列中的兩個
3. col break強制最后兩列換行
4. 最后兩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進行更改。