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

时间:2018-01-16 18:25:07

标签: 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。

提前致谢。

3 个答案:

答案 0 :(得分:7)

尝试使用以下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。

答案 1 :(得分:0)

如果您正在寻找下拉菜单,那么一切都在这里:

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

如果您正在寻找其他内容,那么一切都在那里,在文档中,包含代码和示例:)

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

答案 2 :(得分:0)

删除对Bootstrap CDN的链接对我有用。尝试删除Bootstrap CDN链接。