html - Bootstrap 4 测试版 : Options Menu has double dropdown icons

标签 html css gulp twitter-bootstrap-4

我对 Bootstrap 使我的选项菜单可视化的方式有疑问。查看屏幕截图:

enter image description here

我不知道这是什么原因。在这种特殊情况下我没有使用标签,但它们也无济于事。

这是代码:

        <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。

提前致谢。

最佳答案

尝试使用以下 css,但是 bootstrap 应该已经处理好了。您如何在 bootstrap 的网站上看到相同的选择?它那里也有双箭头吗?您使用的是什么浏览器?

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

编辑:

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

enter image description here

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

关于html - Bootstrap 4 测试版 : Options Menu has double dropdown icons,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48287610/

相关文章:

javascript - 如何使用 JavaScript 从多个下拉列表中选择唯一值?

html - 在谷歌浏览器中设置拼写检查语言

javascript - 浏览器说功能未定义(但它是)

css - -webkit-clip-path 滚动条出现时 chrome 中的神秘行

html - 仅对嵌套列表的第一级设置样式

javascript - Gulp uglify 正在运行但不工作

html - CSS 表格 - 添加边距列和行 border-bottom

javascript - 添加 Javascript Onclick 到 .css 文件

css - Gulp 没有在 Visual Studio 2015 中编译 LESS 文件?

docker - 无法与gulp-webserver一起使用docker-compose