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.

提前致谢。

Answer 1

如果您要查找的是下拉菜单，这里应有尽有：

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

如果您正在寻找其他东西，那么一切都在那里，在文档中，带有代码和示例:)

普通侧边菜单模板https://bootsnipp.com/tags/sidebar

Answer 2

尝试使用以下 css，但是 bootstrap 应该已经解决了。您如何在 bootstrap 的网站上看到相同的 select？那里也有双箭头吗？您使用的是什么浏览器？

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

编辑：

使用上述解决方案时要小心。这些 CSS 属性已存在于 bootstrap.min.css and the Custom Select renders fine on their demo: https://getbootstrap.com/docs/4.1/components/input-group/#custom-select

中

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

Answer 3

删除 link 到 Bootstrap CDN 对我有用。尝试删除 Bootstrap CDN link。

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

Bootstrap 4 Beta: Options Menu has double dropdown icons

html

css

gulp

twitter-bootstrap-4

编辑：