如何从引导程序的下拉菜单中删除边框空间

Question

我对Bootstrap（使用3.3.7版本）和CSS非常陌生，需要对现有代码进行一些前端编辑。

我得到了以下代码：

<nav class="navbar navbar-default">
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select Fields
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <ul>
            <li style="list-style-type: none" ng-repeat="fieldObj in vm.gridOptions.columnDefs">
                <input type="checkbox" ng-model="fieldObj.visible"> {{fieldObj.field}}
            </li>
            <li style="list-style-type: none">
                <button ng-click="vm.refreshGrid()">OK</button>
            </li>
        </ul>
    </div>
</div></nav>

其结果如下：

我可以控制列表元素周围的空白吗？

谢谢

Answer 1

您需要重置llistItem，默认情况下，它采用浏览器特定的样式

ul

Answer 2

使用

   .dropdown-menu ul{
    padding-left:3px;
    }

代替默认的padding-left:40px;

.dropdown-menu ul{
padding-left:3px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <nav class="navbar navbar-default">
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select Fields
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <ul>
            <li style="list-style-type: none">
                <input type="checkbox" ng-model="fieldObj.visible"> no
            </li>
           <li style="list-style-type: none">
                <input type="checkbox" ng-model="fieldObj.visible"> yes
            </li>
            <li style="list-style-type: none">
                <button ng-click="vm.refreshGrid()">OK</button>
            </li>
        </ul>
    </div>
</div></nav>