我怎么能删除角度的下拉框？

Question

如何禁用此角度？

我正在使用boostrap，我从getboostrap

获取它

这是我的代码..

<div class="navbar" >
              <div class="navbar-inner">
                <div class="container">
                  <ul class="nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" >Menu <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-submenu">
                                <a class="dropdown-tonggle" data-toggle="dropdown">SubMenu </a>
                                <ul class="dropdown-menu">
                                    <li><a>sub_1</a></li>
                                </ul>
                            </li>
                            <li><a>nomor 2</a></li>
                            <li><a>nomor 3</a></li>
                        </ul>
                     </li>
                     <li >
                        <a>MID</a>
                     </li>
                   </ul>
                   <ul class="nav nav-tabs navbar-inverse pull-right">
                    <li>
                        <a>Right</a>
                    </li>
                    <li>
                        <a>asdfb</a>
                    </li>
                   </ul>
                </div>
              </div>
</div>

我试图从班级中删除一些编码，但我认为它不起作用..

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

我希望下拉框没有角度......就像这个

我也导入了一些文件引导程序。

<link href="css/bootstrap.css" rel="stylesheet" media="screen" />
<script src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 1

这是以下两个部分：

.navbar .nav > li > .dropdown-menu:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

.navbar .nav > li > .dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}

从bootstrap CSS中删除它们，你应该没问题。

Answer 2

修改任何库或框架的核心文件非常糟糕，因为将来的代码会不一致，这可能需要您在原始库已经支持时添加大量冗余工作。

对于您的情况，您只需要覆盖它，而不是删除Twitter Bootstrap的核心文件中的CSS样式：

.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

.navbar .nav > li > .dropdown-menu:after {
    content: none;
}

<强> Bootply Demo

给你的navbar一个班级更好：

<div class="navbar override">

这可以帮助您更准确地定位它，而不是像上面代码那样覆盖所有navbar：

.override.navbar .nav > li > .dropdown-menu:before {
  content: none;
}

.override.navbar .nav > li > .dropdown-menu:after {
  content: none;
}

<强> Bootply Demo