HTML，CSS，JQuery DataTable導致非工作Bootstrap格式化

Question

我有我的表有2行，父行和孩子。在我使用「JQuery Datatable」庫之前，在我的chidlrow標籤和字段的對齊方面都很好。標籤及其字段應水平對齊，但所有此字段應處於垂直位置。

這種不一致的情況只發生在瀏覽器內的全屏/加寬表格時。但是，當瀏覽器寬度較小時，它會自動對齊。

這是什麼樣子之前（不含jQuery的數據表插件）：

這是它看起來像現在（使用jQuery數據表插件）：

我想當我使用「Jquery DataTable」庫時，將字段格式化爲第一個圖像。

這裏是我的JSFIDDLE

**注：儘量擴大/最大化我的jsfiddle的「輸出」區域，這樣你會看到現場被disaligned。

@import url(' //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

<div id="myTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div><div class="row"><div class="col-sm-12"><div class="dataTables_scroll"><div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;"><div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1132px; padding-right: 0px;"><table class="table table-condensed table-striped table-responsive dataTable no-footer" role="grid" style="margin-left: 0px; width: 1132px;"><thead> 
 
      <tr role="row"><th style="display: none; width: 28px;" class="sorting_asc" tabindex="0" rowspan="1" colspan="1" >Column1</th><th style="display: none; width: 4px;" class="sorting" tabindex="0" rowspan="1" colspan="1">&nbsp;</th><th class="sorting" tabindex="0" rowspan="1" colspan="1" style="width: 697px;" >Column2</th><th class="sorting" tabindex="0" rowspan="1" colspan="1" style="width: 208px;" >Column3</th><th class="sorting" tabindex="0" rowspan="1" colspan="1" style="width: 119px;" >&nbsp;</th><th class="sorting" tabindex="0" rowspan="1" colspan="1" style="width: 28px;" >&nbsp;</th></tr> 
 
     </thead></table></div></div><div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%; height: 266px;"><table id="myTable" class="table table-condensed table-striped table-responsive dataTable no-footer" role="grid" style="width: 100%;"><thead> 
 
      <tr role="row" style="height: 0px;"><th style="display: none; width: 28px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" class="sorting_asc" rowspan="1" colspan="1" aria-sort="ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Column1</div></th><th style="display: none; width: 4px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" class="sorting" rowspan="1" colspan="1" ><div class="dataTables_sizing" style="height:0;overflow:hidden;">&nbsp;</div></th><th class="sorting" rowspan="1" colspan="1" style="width: 697px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" ><div class="dataTables_sizing" style="height:0;overflow:hidden;">Column2</div></th><th class="sorting" rowspan="1" colspan="1" style="width: 208px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" ><div class="dataTables_sizing" style="height:0;overflow:hidden;">Column3</div></th><th class="sorting" rowspan="1" colspan="1" style="width: 119px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" ><div class="dataTables_sizing" style="height:0;overflow:hidden;">&nbsp;</div></th><th class="sorting" rowspan="1" colspan="1" style="width: 28px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" ><div class="dataTables_sizing" style="height:0;overflow:hidden;">&nbsp;</div></th></tr> 
 
     </thead> 
 
     
 
     <tbody> 
 
<tr role="row" class="odd shown">       
 
    <td style="display:none;" class="sorting_1"> 
 
     <span class="item_id hidden" >&nbsp;</span> 
 
     <div style="display:none; margin-left: 5px;width:100px;"> 
 
      <input class="form-control " maxlength="10" size="10" type="text"> 
 
     </div> 
 
    </td> 
 
    <td style="display:none"> 
 
    </td> 
 
    <td class="toggle"> 
 
     <div style="display:inline" class="">Sample</div> 
 
     <input type="hidden" > 
 
    </td> 
 
    <td style="min-width:135px"> 
 
     <button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" >Button1 
 
     </button> 
 
     <button class="btn btn-primary " style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" >Button2 
 
     </button> 
 
     <div class="" style="text-align:left;"> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <button class="btn btn-warning" style="min-width:75px;margin-right:3px;margin-bottom:3px;padding:3px" >Button3 
 
     </button> 
 
    </td> 
 
    <td> 
 
     <a class="" style="display:inline;padding:2px" > 
 
      <i class=""> 
 
      </i> 
 
     </a> 
 
    </td> 
 

 
</tr> 
 
<tr class="tablesorter-childRow"> 
 
    <td colspan="6"> 
 
     <div class="" >        
 
      <div class="form-group "> 
 
       <label class="control-label col-xs-6 col-md-3" for="Field1">Field1 
 
       </label> 
 
       <div class=" col-xs-6 col-md-9"> 
 
        <input class="form-control" id="Field1" type="text"> 
 
        <div class="" style="display:none"></div> 
 
       </div> 
 
      </div> 
 
     <div class="form-group "> 
 
      <label class="control-label col-xs-6 col-md-3" for="Field2">Field2 
 
      </label> 
 
      <div class="col-xs-6 col-md-9"> 
 
       <textarea class="form-control" cols="40" id="Field2" rows="5" ></textarea>  
 
       <div class="" style="display:none"></div> 
 
      </div> 
 

 
     </div> 
 
     <div class="form-group "> 
 
      <label class="control-label col-xs-6 col-md-3" for="Field3">Field3</label> 
 
      <div class="col-xs-6 col-md-9"> 
 
       <div class="btn-group" data-toggle="buttons"> 
 
        <label class="btn btn-default " style="margin: 0px 4px 5px 0px;"> 
 
         <input type="radio" name="Field3" autocomplete="off" value="1"> Radio1 
 
        </label> 
 
        <label class="btn btn-default " style="margin: 0px 4px 5px 0px;"> 
 
         <input type="radio" name="Field3" autocomplete="off" value="2"> Radio2 
 
        </label>     
 
        <label class="btn btn-default " style="margin: 0px 4px 5px 0px;"> 
 
         <input type="radio" name="Field3" autocomplete="off" value="3"> Radio3 
 
        </label>  
 
       </div> 
 
       <div class="" style="display:none"></div> 
 
      </div> 
 
     </div> 
 
     <div class="form-group " > 
 
      <label class="control-label col-xs-6 col-md-3" for="Field4">Field4</label> 
 
      <div class="col-xs-6 col-md-9"> 
 
       <textarea class="form-control" cols="40" id="Field4" rows="5" ></textarea> 
 
\t \t  <div class="" style="display:none"> 
 
       </div> 
 
      </div> 
 
     </div>  
 
     <div class="form-group "> 
 
      <label class="control-label col-xs-6 col-md-3" for="Field5">Field5</label> 
 
      <div class="col-xs-6 col-md-9 "> 
 
       <select class="form-control" id="Field5" > 
 
        <option value="0" selected="selected">Option1</option> 
 
        <option value="1">Option2</option> 
 
        <option value="2">Option3</option> 
 
       </select>  
 
       <div class="" style="display:none"></div> 
 
      </div> 
 
     </div> 
 
    
 
    </div> 
 
    </td> 
 
</tr> 
 
</tbody> 
 
    </table></div></div></div></div><div class="row"><div class="col-sm-5"></div><div class="col-sm-7"></div></div></div> 
 

Answer 1

快速修復只是嘗試以下css來保持佈局沒有更高寬度扭曲，

.form-inline .form-group { 
    width: 100%; 
} 

這是速戰速決可能不是長期解決方案。

FIDDLE