Question

我们正在使用PHP使用Bootstrap 3动态生成表单HTML。

在bootstrap 2中，在不更改表单内的标记的情况下切换表单样式更容易一些。我们只需要将表单类从“表单”更改为“表单水平”。这使得动态生成表单代码和更改设计/显示非常容易。

在bootstrap 3中，这不再可能，并且必须修改表单中的html标记以添加水平表单的“col”类。我们需要能够覆盖所有col-xx-x类，如果它们位于具有“form”或“form-inline”类的表单中，以防止我们必须更改每个表单类的标记。我需要为此写一个新的mixin吗？如果有任何例子？

生成的CSS的一个小例子如下：

.form .col-lg-1, .form .col-lg-2, .form .col-lg-3, .form .col-lg-4, 
.form .col-lg-5, .form .col-lg-6, .form .col-lg-7, .form .col-lg-8,
.form .col-lg-9, .form .col-lg-10, .form .col-lg-11, .form .col-lg-12, 
.form .col-lg-13, .form .col-lg-  14, .form .col-lg-15, .form .col-lg-16,
.form .col-lg-17, .form .col-lg-18, .form .col-lg-19, .form .col-lg-20,
.form .col-lg-21, .form .col-lg-22, .form .col-lg-23 { 
    float: none 
}

Answer 1

似乎可以更容易使用“control-label”类覆盖它们，然后将另一个类添加到围绕控件的div。

示例：

.form .control-label,
.form .controls {
   float: none;
   width: auto;
   padding: 0;
}

只要有一个“控制标签”类并且实际输入周围的div有一类“控件”，这似乎工作正常。

Answer 2

似乎属性选择器在这里也能正常工作：

.form [class^='col-lg-'], /* starts with col-lg- class */
.form [class*=' col-lg-'], /* contains later value starting with col-lg- */
.form-inline [class^='col-lg-'],
.form-inline [class*=' col-lg-'] {
   float: none;
}

Bootstrap 3形式和形式水平更容易造型

2 个答案: