我正在使用Bootstrap 4.我试图删除下拉列表中的箭头.

我为Bootstrap 3找到的answers不再起作用了.

jsfiddle是here.

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

推荐答案

只需从元素中删除"dropdown-toggle"类.如果您具有如下所示的data-toggle属性,则下拉菜单仍然有效

<button role="button" type="button" class="btn" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

重写.dropdown-toggle个类样式会影响所有下拉列表,您可能希望在其他按钮中保留箭头,这就是为什么在我看来这是最简单的解决方案.

Edit:如果你想保持边框造型,就保持dropdown

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

Css相关问答推荐

与Chrome和Edge相比,背景位置动画在Firefox中运行并不流畅

在react native中应用阴影

悬停时可展开的按钮与屏幕右侧对齐,如何保持未悬停的按钮正确对齐?

无限交替css动画之间的未知延迟

SVG文本在移动浏览器上增长并溢出

为什么CSS flex似乎应用了两次内部元素的填充?

CSS Select 器仅 Select 具有特定类名称的每行的第一个单元格

如何使用显示网格制作不同大小的列取决于元素的数量

Bootstrap 5 - 更改列顺序时出现问题

如何在 TypeScript 文件中导入 CSS 模块?

用于替代渲染的 CSS 嵌套

Angular Datepicker - 更改日期范围 Select 样式

Tailwind:如何设置网格的自动填充?

卡在 CSS 中的grid-template-columns中

AngularJS Graphs & Charts - 实线和虚线的混合

CSS3 的 :root 伪类和 html 有什么区别?

使用 CSS 在悬停时转换 SVG 路径的填充属性

在 中制作等宽的列

在响应式设计中指定 HTML 文本中的首选换行点

CSS:悬停一个元素,多个元素的效果?