如何使嵌套元素的形式內嵌引導？

我試圖讓一種形式，一個線，但我不能這樣做成功。如何使嵌套元素的形式內嵌引導？

有許多不同類型的類，「形狀的內聯」，「輸入的基團」，形式的基團」和‘輸入性基團的附加’

我有以下形式：

<form role="form-inline" autocomplete="off"> 
    <div class="entry input-group col-xs-5"> 
     <div class="input-group"> 
      <select class="form-control selectBox" name="category"> 
       <option>Type</option> 
       <option>Plot</option> 
       <option>Burial</option> 
      </select>   
     </div> 
     <div id="change_me" class="input-group"> 
      <div class="input-group-addon"> From </div> 
      <div class="form-group"> 
       <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" /> 
      </div> 
      <div class="input-group-addon"> To </div> 
      <div class="form-group"> 
       <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" /> 
      </div> 
     </div> 
     <!--<input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />--> 
     <span class="input-group-btn"> 
      <button class="btn btn-success btn-add" type="button"> 
       <span class="glyphicon glyphicon-plus"></span> 
      </button> 
     </span> 
    </div> 
</form>

當我刪除ID爲「change_me」的形式是在一條線上的股利。但是我需要該分區，所以我可以刪除或添加元素到DIV根據我選擇的標籤。

對於＃ change_me它看起來像這樣：

沒有#change_me它看起來像這樣：

我需要還有#change_me在那裏，所以當我使用選擇我可以改變的內容。（即刪除文本框的一個和文本，所以我只有一個輸入信息）

另外如果刪除要的形式也變化爲兩行。

來源

2016-11-11 Whitecat

這是你在找什麼？ http://codepen.io/yongchuc/pen/BQKowM –

在自舉，input-group被默認設置爲顯示/表現得象一個表。我將它設置這種方式並使用form-horizontal。

<form role="form-horizontal" autocomplete="off"> 
    <div class="form-group"> 
    <div class="label-control col-sm-2"> 
     <select class="form-control selectBox" name="category"> 
     <option>Type</option> 
     <option>Plot</option> 
     <option>Burial</option> 
     </select> 
    </div> 
    <div id="change_me" class="input-group"> 
     <span class="input-group-addon"> From </span> 
     <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" /> 
     <span class="input-group-addon"> To </span> 
     <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" /> 
     <span class="input-group-btn"> 
     <button class="btn btn-success btn-add" type="button"> 
      <span class="glyphicon glyphicon-plus"></span> 
     </button> 
     </span> 
    </div> 
    </div> 
</form>

這裏有一個codepen供您審查。 http://codepen.io/yongchuc/pen/BQKowM

來源

2016-11-12 06:35:59

如何使嵌套元素的形式內嵌引導？

回答

相關問題