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

Question

Bootstrap 专家您好。

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

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

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

我只在 DATATABLES 中使用 SELECT OPTION 时遇到了这个问题。但对于 INPUTTEXT，一切正常。我也尝试禁用数据表的 CSS，但它仍然不起作用。我还注意到在添加新记录选项中使用 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 本身在其视图中使用 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 标记的属性存在冲突。

所以我的 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 视图中，SELECT 标记的宽度现在设置为 100%，并且与其他对象正确对齐。

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