Bootstrap 4 Beta: 选项菜单有双下拉图标

Question

我对Bootstrap制作的选项菜单的可视化方式有问题。请查看截图：

我不知道原因是什么。在这种特定情况下，我没有使用标签，但它们也没有帮助。

以下是代码：

        <nav class="sidebar col-sm-4 col-md-3 d-inline align-self-auto">
        <div class="form-group">
            <select class="custom-select mt-2">
                <option selected>Марка</option>
                <option value="1">БМВ</option>
                <option value="2">Рено</option>
                <option value="3">Форд</option>
            </select>

请帮我翻译以下内容，因为我想要一个外观出色的网站。 我正在使用Bootstrap 4.0.0.b 我还应该提到我正在使用gulp编译我的CSS。

谢谢。

- Teddy Markov

Answer 1

尝试使用以下CSS，但是Bootstrap应该已经处理了这个问题。您在Bootstrap的网站上看到了相同的选择框吗？它那里也有双箭头吗？您使用的是哪个浏览器？

.custom-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

编辑：

在使用上述解决方案时要小心。这些CSS属性已经在bootstrap.min.css中存在，并且自定义选择在他们的演示中呈现良好：https://getbootstrap.com/docs/4.1/components/input-group/#custom-select

确保您使用的是正确的版本，并且没有任何东西覆盖Bootstrap的CSS。

- Miro

---

这样就解决了。虽然我认为这更像是一个变通方法。问题出现在我从CDN转移到使用npm收集的“bootstrap”：“^4.0.0-beta.3”。我在Debian上使用Mozilla Firefox 52.5.2。 - Teddy Markov

顺便说一下，我想尝试不使用beta.3，只安装beta版本。结果更糟糕的是，它影响了按钮着色和选项菜单宽度。希望这些问题在正式版中得到修复。 - Teddy Markov

Bootstrap源代码中的Sass文件不包含供应商前缀。需要使用类似Autoprefixer的工具在构建时添加它们。相关文档 - Pierre de LESPINAY

仍然在Bootstrap 4.1.1中遇到此问题。难以置信！谢谢。 - Jan Zahradník

仍然以4.2.1版本呈现，天哪 - Andrey

@Andrey，请检查我的编辑。可能是你这边的问题。 - Miro

Answer 2

如果你正在寻找下拉菜单，这里有一切：

https://getbootstrap.com/docs/4.0/components/dropdowns/

如果您正在寻找其他内容，文档中都有，包括代码和示例 :)

常规侧边菜单模板 https://bootsnipp.com/tags/sidebar

- Ralph

---

嗨，这是一个选项元素，如此处所述：https://getbootstrap.com/docs/4.0/components/forms/。我想将其保留为选项项，因为这就是它的作用。在这种情况下，我不想使用下拉菜单，因为列表中可能有许多元素，而且看起来不太合适。 - Teddy Markov

Answer 3

对我来说，删除与 Bootstrap CDN 的链接起作用了。尝试删除 Bootstrap CDN 链接。

- Enock omondi