时间戳

首页 > 解决方案 > 表单行内的新行

html - 表单行内的新行

问题描述

<br/>是否可以在前一个表单行中创建一个新行（如html 中）。

这就是我所拥有的。我想将“Recherche”放在一个新行中（但我仍然想将它保留在表单行 div 中）。

你有想法吗 ？

http://jsfiddle.net/aq9Laaew/96443/

谢谢 ！

标签： htmlformsbootstrap-4

解决方案

改变<form>班级。像这样：

老的：

<form class="form-inline" name="formFiltre" id="formFiltre" method="post">

新的：

<form class="form" name="formFiltre" id="formFiltre" method="post">

工作示例：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="form-row">
  <div class="col-lg-12">
    <form class="form" name="formFiltre" id="formFiltre" method="post">
      <input type="hidden" name="nav" value="1" />
      <label for="recherche">Arborescence</label>
      <select name="rf_arbo[0]" id="rf_arbo0" class="form-control rf_arbo" style="margin: 1%">
        <option value="">-- choisir --</option>
        <option value="7">Toutes</option>
        <option value="2">Offre du moment</option>
        <option value="6">Témoignages</option>
        <option value="8">Loi de défiscalisation</option>
      </select>

      <!-- SAUT DE LIGNE -->


      <label for="recherche">Recherche</label>
      <input type="text" name="rf_recherche" id="rf_recherche" class="form-control" value="" style="margin: 1%" />
      <select name="rf_statut" id="rf_statut" class="form-control" style="margin: 1%">
        <option value="">-- statuts --</option>
        <option value="v1">En ligne</option>
        <option value="v0">Hors ligne</option>
      </select>
      <select name="rf_accueil" id="rf_accueil" class="form-control" style="margin: 1%">
        <option value="">-- accueil --</option>
        <option value="v1">Affiché</option>
        <option value="v0">Non affiché</option>
      </select>
      <input type="submit" class="btn" value="Rechercher" />
    </form>
  </div>

</div>

推荐阅读