How can I remove the arrow from drop down list in Bootstrap CSS?

前端 未结 9 834
生来不讨喜
生来不讨喜 2021-02-03 10:33

I am trying to remove the arrow that appears on a drop down menu in Twitter Bootstrap framework. Has anyone figured a way of removing the arrows?

相关标签:
9条回答
  • 2021-02-03 10:40

    If you copy an existing Bootstrap dropdown example, the menu button tag looks something like this:

    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Name</button>
    

    Removing the dropdown-toggle class removes the arrow (or caret):

    <button class="btn btn-primary" type="button" data-toggle="dropdown">Menu Name</button>
    
    0 讨论(0)
  • 2021-02-03 10:41

    In Bootstrap4 remove "dropdown-toggle" class from "a" element.

    0 讨论(0)
  • 2021-02-03 10:43

    From: https://getbootstrap.com/2.3.2/components.html#buttonDropdowns

    <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Action
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>
    

    If you remove <span class="caret"></span> the arrow is not shown.

    Tried it using the dev. console in Chrome, and seems to work.

    0 讨论(0)
  • 2021-02-03 10:46

    add .dropdown-toggle-split class in the tag

    0 讨论(0)
  • 2021-02-03 10:50
    .dropdown-toggle::after{
        display: none;
    }
    
    0 讨论(0)
  • 2021-02-03 10:50

    The only thing that worked for me was that I removed class="caret" if you are using bootstrap dropdown. Hope this work for you too.

    0 讨论(0)
提交回复
热议问题