同じ行のブートストラップ入力とスパンの内側

Question

入力とスパンを同じ行に表示する際に問題があります。彼らはテーブルの最初のセルの内側にあります。

私がすでに試したことは、フォームインラインクラスを使用することですが、両方の要素は引き続き別々の行に表示されます。

私は間違っていますか？

Code example from code pen.

出典：

<table id="tblJEEVUG" class="table table-hover table-bordered table-striped table-condensed"> 
    <thead> 
     <tr> 
     <th>Datum</th> 
     <th>Št. oseb</th> 
     <th>Opomba</th> 
     <th>Skupina</th> 
     <th></th> 
     </tr> 
    </thead> 
    <tbody> 

      <tr data-ievug_key="170000536"> 



       <td id="devug_dst" style="width:200px;"><input class="form-control datetimepicker form-inline bounddtp" value="" style="width:70%;"> 
       <span id="spanOK" class="glyphicon glyphicon-ok form-inline" style="color: green; font-weight: bold; font-size: 20px; width: 5%;"></span></td> 
       <td id="ievug_nop" style="width:50px;"><input class="form-control cbeh-number"></td> 
       <td id="cevug_nto"><input class="form-control" value="zdaj pa en komnetar tule notri zapišem jaz"></td> 
       <td id="igrop_key"> 

       <select class="form-control" data-editable="1"> 
        <option></option> 
         <option value="100000030">Oddelek za transport</option> 
         <option value="100000029">Catering strežba</option> 
         <option value="100000504" selected="">Catering vodje prireditve</option> 
         <option value="100000748">HKJ-odgovorni kuharji </option> 
         <option value="100000028">HKJ-kuharji </option> 

       </select> 

       </td> 
       <td style="vertical-align:middle;text-align:center;"> 
       <span class="glyphicon glyphicon-remove" title="Izbriši" style="color:red;cursor:pointer;display:block;" onclick="PopUpJEEVUS.RemoveRowJEEVUG(this);"></span> 
       </td> 

      </tr> 
      <tr data-ievug_key="170000537"> 



       <td id="devug_dst" style="width:200px;"><input class="form-control datetimepicker form-inline bounddtp" value="15.11.2017 10:30" style="width:70%;"> 
       <span id="spanOK" class="glyphicon glyphicon-ok form-inline" style="color: green; font-weight: bold; font-size: 20px; width: 25%;"></span></td> 
       <td id="ievug_nop" style="width:50px;"><input class="form-control cbeh-number" value="44"></td> 
       <td id="cevug_nto"><input class="form-control" value="transtport pa bom dal en manjši komentar za tale transport sedaj"></td> 
       <td id="igrop_key"> 

       <select class="form-control" data-editable="1"> 
        <option></option> 
         <option value="100000030" selected="">Oddelek za transport</option> 
         <option value="100000029">Catering strežba</option> 
         <option value="100000504">Catering vodje prireditve</option> 
         <option value="100000748">HKJ-odgovorni kuharji </option> 
         <option value="100000028">HKJ-kuharji </option> 

       </select> 

       </td> 
       <td style="vertical-align:middle;text-align:center;"> 
       <span class="glyphicon glyphicon-remove" title="Izbriši" style="color:red;cursor:pointer;display:block;" onclick="PopUpJEEVUS.RemoveRowJEEVUG(this);"></span> 
       </td> 

      </tr> 
      <tr data-ievug_key="170000535"> 



       <td id="devug_dst" style="width:200px;"><input class="form-control datetimepicker form-inline bounddtp" value="16.11.2017 10:30" style="width:70%;"> 
       <span id="spanOK" class="glyphicon glyphicon-ok form-inline" style="color: green; font-weight: bold; font-size: 20px; width: 25%;"></span></td> 
       <td id="ievug_nop" style="width:50px;"><input class="form-control cbeh-number" value="44"></td> 
       <td id="cevug_nto"><input class="form-control" value="fffffffffffffffffffff"></td> 
       <td id="igrop_key"> 

       <select class="form-control" data-editable="1"> 
        <option></option> 
         <option value="100000030">Oddelek za transport</option> 
         <option value="100000029" selected="">Catering strežba</option> 
         <option value="100000504">Catering vodje prireditve</option> 
         <option value="100000748">HKJ-odgovorni kuharji </option> 
         <option value="100000028">HKJ-kuharji </option> 

       </select> 

       </td> 
       <td style="vertical-align:middle;text-align:center;"> 
       <span class="glyphicon glyphicon-remove" title="Izbriši" style="color:red;cursor:pointer;display:block;" onclick="PopUpJEEVUS.RemoveRowJEEVUG(this);"></span> 
       </td> 

      </tr> 



    </tbody> 
    </table> 

Answer 1

あなただけのコントロールクラスとmargin-rightへを形成するためにfloat:leftを追加し、入力テキストボックスに チェックhere私の例

Answer 2

をfloat: left;を置く必要がありますマそれは良い見える。 https://codepen.io/lionelchris/pen/dZVqoO

Answer 3

は、フォームコントロールでdisplay: inline-block CSSを入れて、あなたがBootstrap4を使用している場合は、その場合には、あなたが入力に.d-inline-blockクラスを置くことができます。

これはコードを正しく実行します。