Question

为什么Bootstrap类无法使用HTML中的select选项而感到困惑，而除了select选项之外，所有类都正常工作。

以下是@permission_required的工作演示：

http://plnkr.co/edit/DR8jPACODGzvW8W0ZX2u?p=preview

text-uppercase

我做错了吗？

Answer 1

class="text-uppercase"需要与option代码一起使用。

<select class="form-control">
    <option>One</option>
    <option class="text-uppercase"><span>two</span></option>
    <option class="text-uppercase"> three</option> //same here
</select>

您一直在使用class="text-uppercase" <span>而不是<option>

Answer 2

完全如同@debin在评论中所说的那样。 class text-uppercase被bootstrap样式的默认行为覆盖，即

button, select { text-transform: none;}

你可以在这里查看......

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css

所以要应用像text-uppercase text-capetalize之类的类，我们必须在css文件中添加额外的类或类似内联的内部或外部样式。所以确切的答案是这样的：

<select class="form-control customClass">
    <option>One</option>
    <option>two</option> 
    <option> three</option> 
</select>

在您的CSS中使用.customClass并使用样式text-transform: uppercase;

@SaucedApples建议的第二种方法

<select class="form-control">
    <option>One</option>
    <option class="text-uppercase"><span>two</span></option>
    <option class="text-uppercase"> three</option> //same here
</select>

这会将indvidualy类添加到选项标记。

将其作为答案发布可能有助于其他人：）

Bootstrap类未应用于HTML select标记

2 个答案: