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

前端 未结 9 856
生来不讨喜
生来不讨喜 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:55

    Just remove border-bottom from dropdown-menu will remove arrow from the navigation bar.

    .navbar .nav > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu:after{
        border-bottom: none;
    }
    
    0 讨论(0)
  • 2021-02-03 11:01

    I've found the best solution is to add overflow:hidden; to .dropdown-menu

    0 讨论(0)
  • 2021-02-03 11:02

    Removing the caret class from the link removes the arrow from the navigation bar,

    .dropdown-menu::before, 
    .dropdown-menu::after {
        border: none;
        content: none;
    }
    

    Will remove the little tab from the drop down menu its self.

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