Bootstrap删除可折叠主菜单和子菜单之间的间隙

时间:2017-09-01 04:13:02

标签: css twitter-bootstrap

我想删除主菜单和子菜单之间的差距。 “添加学生”是主要的,“新生”和“受让人”是子菜单       这是输出:
enter image description here

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="sidebar-wrapper">
  <ul class="nav">
    <li>
      <a data-toggle="collapse" data-parent="#p1" href="#pv1"><i class="material-icons">content_paste</i>
						<p>Add Student</p></a>
      <ul class="nav collapse" id="pv1">
        <li>
          <a href="user.html"><i class="material-icons">add_circle</i>
                                    <p>Freshmen</p></a>
        </li>
        <li>
          <a href="user.html"><i class="material-icons">add_circle</i>
						          <p>Transferee</p></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
.sidebar-wrapper .nav > li > a{
  padding:5px 15px;
}

.nav > li > a p{
  margin:0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>



<div class="sidebar-wrapper">
            <ul class="nav">
                <li>
                    <a data-toggle="collapse" data-parent="#p1" href="#pv1"><i class="material-icons">content_paste</i>
                    <p>Add Student</p></a>
                    <ul class="nav collapse" id="pv1">
                        <li>
                            <a href="user.html"><i class="material-icons">add_circle</i>
                                <p>Freshmen</p></a>
                        </li>
                        <li>
                            <a href="user.html"><i class="material-icons">add_circle</i>
                              <p>Transferee</p></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
&#13;
&#13;
&#13;

根据您的需要更改padding

这与您正在寻找的相同吗?

希望这有帮助。