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

Question

美好的一天，Bootstrap 专家。

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

现在，当我单击“编辑”链接时，我会显示一个模态表单，如下所示。正如您在模态表单中看到的那样，SELECT OPTION 不像其他两个输入那样显示为内联 block 。

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

我只在 DATATABLES 中使用 SELECT OPTION 时遇到这个问题。但是对于 INPUTTEXT，一切正常。我也尝试禁用数据表的 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 标签时，该对象的宽度设置为自动。看看下面的截图。

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

解决方案:这是我的第一个解决方案:我创建了一个 custom.css，我在其中覆盖了此类 FORM-CONTROL 的值。

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

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

但是，使用覆盖方法会对 DataTable 本身产生影响。正如您在下面看到的，导航标签现在在选项下方对齐，因为它使用 100% 的宽度属性。这就是我所说的在 DATATABLE 中使用时 SELECT 标记的属性冲突。

所以我的 PERMANENT 解决这个问题的方法是创建一个新类，复制 FORM-CONTROL 类的整个属性，然后将其分配给 DataTable 内 MODAL 内的 SELECT 标记。将其声明为 INTERNAL 类型的 CSS 声明..

.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 View 上，SELECT 标签的宽度现在设置为 100%，并且与其他对象正确对齐。

我希望我已经向这个社区分享了一些知识。非常感谢。