HTML Bootstrap 表单样式

Posted 2023-03-06

【中文标题】HTML Bootstrap 表单样式

【英文标题】：HTML Bootstrap form styling

【发布时间】：2018-10-29 05:41:09

【问题描述】：

如何让这个列表显示文本框上方的按钮？如

Ideal formatting

代码是：

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

目前我的页面显示如下：

Current style

【问题讨论】：

Bootstrap 4 没有 col-xs 它只是 col。

所以我假设 col-md 也没有做任何事情？

col-md 有效，见：getbootstrap.com/docs/4.1/layout/grid/#grid-options

【参考方案1】：

您可以使用display: flex 来获取布局。您将需要进行更多调整以使输入与样式匹配。

我创建了两个辅助类：columns 和 col。

columns 是一个带有display: flex 的容器 div。 col 是具有flex: 1 的 div 中的每一列，这意味着它们将在容器中均匀分布。

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>

【讨论】：

对不起，我对 CSS 完全是个菜鸟，似乎 col 类已经在 bootstrap 4 中创建了，这会是个问题吗？如果我再次创建它？

@GonzaloIgnacioVeraPortilla 是的，那么您应该将名称更改为 my-col 或任何唯一名称，类名可以是任何名称。

@mahan 你的答案在哪里？

@mahan 我也会这么说，你的评论对这个问题没有任何帮助，如果你想在某人的回答中指出错误，请使用详细信息和替代解决方案

【参考方案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>

更新

按照这些步骤进行

排成一排 col-6 用于第一列的两个 colbreak 强制最后两列换行 col-3 最后一拖 columns

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

检查这个codepen

如您所见，表单元素比 img 中的元素更弯曲。如果您使用SCSS，请更改半径。否则，用 css 更改它。