在数据表中使用时，Bootstrap中的FORM-CONTROL类不会生效

Question

大家好，引导专家。

我被这个问题困住了，我无法找出问题的根本原因。情况就是这样。我正在使用bootstrap3并将其与下面的数据表合并。

现在，当我单击“编辑”链接时，将显示一个模态形式，如下所示。如在模态表单上所见，“ SELECT OPTION”没有像其他两个输入一样显示为内联块。

当我使用chrome进行调试时，我发现class form-control类将宽度设置为auto，而必须将其设置为display:inline-block。当我取消单击时，得到了预期的结果。

我只在DATATABLES中使用SELECT OPTION时才遇到此问题。但是对于INPUTTEXT，一切正常。我也尝试禁用datatable的CSS，但仍然无法正常工作。我还注意到在ADD NEW RECORD选项中使用SELECT OPTION可以。

有什么想法专家，可以解决这个问题吗？提前非常感谢您。

我的代码：

<!--START EDIT MODAL WINDOW -->
<div class="col-lg-12">
   <?php $edit_id = 'edit' . $row -> ylid ?>
   <div class="modal fade" id="<?php echo $edit_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal_wrapper" >
        <div class="modal-dialog">
           <?php echo form_open('csettings/edit_yrlvl/'. $row -> ylid)?>
           <div class="modal-content">
           <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="H3">Update Grade/Year Level</h4>
           </div>
           <div class="modal-body"> 
              <div class="form-group">                                                      
                 <label>Subject Code</label>
                 <input value="<?php echo $row -> subjcode ?>" class="form-control" placeholder="Enter Subject Code" required="required" id="subjcode" name="subjcode" />
                 <input value="<?php echo $row -> subjcode ?>" type="hidden" id="hsubjcode" name="hsubjcode" />

                 <label>Description</label>
                 <input value="<?php echo $row -> subjdesc ?>" class="form-control" placeholder="Enter Subject Description" required="required" id="subjdesc" name="subjdesc" />
                 <input value="<?php echo $row -> subjdesc ?>" type="hidden" id="hsubjdesc" name="hsubjdesc" />

                 <label>Grade Level</label>
                 <select class="form-control">
                    <option>Select Grade Level</option>
                 </select>                  
                 </div>
               </div>
               <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                 <button type="submit" class="btn btn-primary">Update</button>
              </div>
           </div>
           </form>
        </div>
     </div>
  </div>
</div>
<!--END EDIT MODAL WINDOW -->    

Answer 1

抱歉，大家，我现在将关闭这篇文章，因为我自己找到了答案。为了与大家分享，我的发现如下：

背景：我正在使用 Bootstrap v3.0 和数据表。

问题：当您在DATATABLE内的 MODAL 中 添加SELECT标记时，该对象的宽度设置为 auto。看看下面的截图。

根本原因： 此问题是由于 DATABLE 本身在其视图中使用 SELECT 标签所致。因此，类form-control的使用存在冲突。如下所示，DataTable 内的此 SELECT 标记的宽度设置为 AUTO。由于我使用的是数据表，因此该表内传递给它的任何内容都将继承为该类设置的任何属性。在本例中，为 SELECT 标签。

解决方案： 这是我的第一个解决方案：我创建一个custom.css覆盖此类 FORM-CONTROL 值的位置。

.form-inline select.form-control{
   display: inline-block;
   width: 100%;
}

通过这段代码，我覆盖了该类，我得到了 MODAL 所需的结果，例如这个。对象 SELECT 标记的宽度现在设置为 100%，与之前设置为 auto 不同。

但是，使用重写方法会对 DataTable 本身产生影响。如下所示，导航的标签现在在选项下方对齐，因为它使用 100% 的宽度属性。这就是我所说的，当在 DATATABLE 内部使用 SELECT 标记时，存在冲突的属性。

因此，我对此问题的永久解决方案是创建一个新类，复制 FORM-CONTROL 类的整个属性，然后将其分配给 DataTable 内 MODAL 内的 SELECT 标记。将其声明为CSS 声明的INTERNAL类型。

.select-option{
            display: inline-block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font size: 14px;
            line-height: 1.428571429;
            color:#555;
            vertical-align: middle;
            background-color:#fff;
            background-image:none;
            border: 1px solid #ccc;
            border-radius:4px;
            box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }

现在，对于这个新类，我将其分配给 SELECT 标记，而不是使用 FORM-CONTROL 类。

<select class="select-option" name="ylcode" id="ylcode">

所以现在的结果就是我所期望的。DataTable 中 SELECT 标记上的标签现在已正确对齐，如下所示。

在 MODAL 视图上，SELECT 标记的宽度现在设置为 100%，并且与其他对象正确对齐。

我希望我向这个社区分享了一点知识。太感谢了。