Bootstrap 3 选择输入表单样式答案

【问题标题】：Bootstrap 3 select input form styleBootstrap 3 选择输入表单样式
【发布时间】：2016-07-08 22:49:43
【问题描述】：

我正在尝试在 bootstrap 3 表单中创建一个类似于其他输入的选择下拉菜单。见plunker

这是在标题中：

<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/vitality-orange.css" rel="stylesheet" type="text/css">

如何使它看起来与其他类型的输入具有相似的风格？这是当前显示的代码：

    <div class="row control-group">
        <div class="form-group col-xs-12 floating-label-form-group controls">
            <label>Email Address</label>
            <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <div class="row control-group">
        <div class="form-group col-xs-12 floating-label-form-group controls">
            <label>Gender</label>
            <select id="gender" class="form-control">
                <option value="male">Man</option>
                <option value="female">Woman</option>
            </select>
        </div>
    </div>

【问题讨论】：

确实我们不知道它现在的样子！，在引导程序中看起来很正常！但是您应该咨询主题制作者，因为活力似乎是一种付费产品，或者向我们提供您现在拥有的（作为结果）以及您想要什么，否则这个问题仍然模棱两可。
主题没有样式select，所以请为它制作自己的样式：codeply.com/go/5RT3pl4Dff

标签： javascript css twitter-bootstrap-3

【解决方案1】：

这个plunker 工作得很好，没有任何变化。

问题在于你的风格 .

floating-label-form-group label {
  /* display: block; */

只需删除 display: block; 一切正常。

【讨论】：

是的，我还在问题中添加了标题代码。我知道当我检查输入元素时，我注意到两个 css 文件都在使用（引导程序和活力）
你可以通过为它创建 plunker/jsfiddler 来具体化吗？需要看看，对于这类问题。
这应该是注释。您有足够的声誉发表评论。
我刚做了香卡。如果您看不到我更新的 plunker，请告诉我
您使用的是哪个浏览器？我可以看到正确的行为。

【解决方案2】：

这个解决方案完成了这项工作。感谢 Skelly 和 Shankar：

主题没有样式选择，因此请为它制作自己的样式： codeply.com/go/5RT3pl4Dff – 斯凯利

【讨论】：

你应该把它放在你的答案中，而不是仅仅有一个指向你的代码的链接。