表格行中的新行

时间:2018-07-17 14:47:41

标签: html forms bootstrap-4

是否有可能在先前的表单行内创建新行(如html中的<br/>

这就是我所拥有的。我想将“ Recherche”放在一个新行中(但我仍然想将其保留在form-row div中)。

你有个主意吗?

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

谢谢!

1 个答案:

答案 0 :(得分:0)

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