jquery - HTML、CSS、JQuery DataTable 结果为无效的 Bootstrap 格式

Question

我的表有 2 行，父行和子行。在我使用“JQuery Datatable”库之前，当涉及到我的 chidlrow 标签和字段的对齐时，一切似乎都很好。标签及其字段应水平对齐，但所有该字段应处于垂直位置。

只有当表格在浏览器中全屏/加宽时才会发生这种未对齐的情况。但当浏览器宽度较小时，它会自动对齐。

这是它之前的样子(没有 Jquery Datatable 插件):

这就是现在的样子(使用 Jquery Datatable 插件):

当我使用“Jquery DataTable”库时，我想像第一张图片一样格式化我的字段。

这是我的 JSFIDDLE

**注意:尝试扩大/最大化我的 Jsfiddle 的“输出”区域，这样您就会看到该字段未对齐。

@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>  
		      <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