如何删除自适应导航栏中的空间？

时间：2018-03-18 13:35:10

标签： html css responsive

我正在尝试创建一个响应式管理面板。我在每个侧边菜单上面都有一个元素

<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;Sales Reports</a>

我想要最小化侧栏变得不可见，这两个元素出现。它工作但我无法删除之间的空间。我该怎么办？

注意：我愿意接受各种建议和改进。

Fiddle Link 

body {
  font-family: 'Exo 2', sans-serif;
}

.nav-sidebar {
  margin: 80px -20px 20px 20px;
}

.nav-sidebar>li>a {
  padding: 20px 20px;
}

.main {
  margin-top: 50px;
  padding: 20px;
}

.placeholders {
  margin-top: 10px;
  margin-bottom: 30px;
}

.placeholder {
  margin-bottom: 20px;
  text-align: center;
}

.placeholder img {
  display: inline;
  border-radius: 50%;
}

a.icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .sidebar ul {
    max-height: 0;
    display: none;
    font-size: 0px;
  }
  .sidebar ul li {
    width: 100%;
  }
  a.icon {
    display: block;
    visibility: none;
    margin-top: 100px;
    padding-left: 10px;
  }
}
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">

<title>Your Own Admin</title>

<link rel="stylesheet" href="css/adminStyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">

<div class="row">
  <div class="col-sm-3 col-md-2 sidebar">
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;Sales Reports</a>
    <ul class="nav nav-sidebar" id="myTopnav">
      <li class="active"><a href="#">Sales Reports</a></li>
      <li><a href="#">Stats</a></li>
      <li><a href="#">Graphs</a></li>
      <li><a href="#">Users</a></li>

    </ul>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;Performance Reports</a>
    <ul class="nav nav-sidebar">
      <li class="active"><a href="#">Performance Reports</a></li>
      <li><a href="#">Revenue</a></li>
      <li><a href="#">Countries</a></li>
      <li><a href="#">Spamers</a></li>

    </ul>

  </div>
  <div class="col-sm-9 col-md-10 main">
    <h1 class="page-header"><i class="fa fa-tachometer" aria-hidden="true"></i> Dashboard
    </h1>
    <div class="row placeholders">
      <div class="col-xs-6 col-sm-3 placeholder">
        <img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
        <h4>Label</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3 placeholder">
        <img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
        <h4>Label</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3 placeholder">
        <img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
        <h4>Label</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3 placeholder">
        <img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
        <h4>Label</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
    <h2 class="sub-header">Detailed Result</h2>
    <hr>
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>ID#</th>
            <th>Detail 1#</th>
            <th>Detail 2#</th>
            <th>Detail 3#</th>
            <th>Detail 4#</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分：0)

如果我理解你的问题，你想要删除你所拥有的两个侧边栏之间的空白区域，并保留第一个侧​​边栏的空白区域。

https://jsfiddle.net/1k9sjkeb/12/ 

.nav-top-sidebar {
  margin: 80px -20px 20px 20px; /* You can change the value of the first top margin to move the sidebar to where you want */
}


.nav-sidebar{
    margin: 0px -20px 20px 20px;
}

更改第一个侧边栏的课程

<div class="col-sm-3 col-md-2 sidebar">
          <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;Sales Reports</a>
           <ul class="nav nav-top-sidebar" id="myTopnav">
               <li class="active"><a href="#">Sales Reports</a></li>
               <li><a href="#">Stats</a></li>
               <li><a href="#">Graphs</a></li>
               <li><a href="#">Users</a></li>

           </ul>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;Performance Reports</a>
           <ul class="nav nav-sidebar">
               <li class="active"><a href="#">Performance Reports</a></li>
               <li><a href="#">Revenue</a></li>
               <li><a href="#">Countries</a></li>
               <li><a href="#">Spamers</a></li>

           </ul>

这应该可以解决问题：）

答案 1 :(得分：0)

在CSS中，你给了margin-top:100px，这导致了另一个元素之间的巨大空间，减少了边距。

@media screen and (max-width: 600px) {

  ...

    a.icon{

        display: block;
        visibility: none;
        margin-top: 16px; /* Adjust margin-top as much you like. */
        padding-left: 10px;

    }
}
相关问题
最新问题