Question

刚刚开始编写所有从头开始编写广告的路障。努力让glyphicons在左侧与div的顶部对齐，并且无法弄清楚我哪里出错了。

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>B01 Media- Admin Panel</title>

  <!-- Bootstrap -->
  <link href="../css/animate.css" rel="stylesheet" />
  <link href="../css/bootstrap-theme.css" rel="stylesheet" />
  <link href="../css/bootstrap.css" rel="stylesheet" />
  <link href="../css/font-awesome.min.css" rel="stylesheet" />
  <link href="../css/magnific-popup.css" rel="stylesheet" />
  <link href="../css/owl.carousel.css" rel="stylesheet" />
  <link href="../css/owl.theme.css" rel="stylesheet" />
  <link href="../css/preload.css" rel="stylesheet" />
  <link href="../css/responsive.css" rel="stylesheet" />
  <link href="../css/YTPlayer.css" rel="stylesheet" />
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

  <link href="admin.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>

  <div class="container-fluid display-table">
    <div class="row display-table-row">
      <div class="col-md-2 display-table-cell valign-top" id="side-menu">
        <h1>Navigation Area</h1>
        <ul>
          <li class="link">
            <a href="Index.html">
              <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
              <span>Dashboard</span>
            </a>
          </li>

          <li class="link">
            <a hef="#collapse-post" data-toggle="collapse" aria-controls="collapse-post">
              <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
              <span>Articles</span>
              <span class="label label-sucess pull-right">20</span>
            </a>
            <ul class="collapse collapsable" id="collapse-post">
              <li><a href="new-articles.html">Create New</a></li>
              <li><a href="articles.html">View Articles</a></li>
            </ul>
          </li>

          <li class="link">
            <a hef="#collapse-comments" data-toggle="collapse" aria-controls="collapse-comments">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
              <span>Comments</span>
            </a>
            <ul class="collapse collapsable" id="collapse-comments">
              <li>
                <a href="Approved.html">Approved
                  <span class="label label-success pull-right">10</span>
                </a>
              </li>

              <li>
                <a href="Unapproved.html">Unapproved
                  <span class="label label-warning pull-right">10</span>
                </a>
              </li>
            </ul>
           </li>

           <li class="link">
            <a href="commenters.html">
              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
              <span>Comments</span>
            </a>
          </li>

          <li class="link">
            <a href="tags.html">
              <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
              <span>Tags</span>
            </a>
          </li>

          <li class="link">
            <a href="Settings.html">
              <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
              <span>Settings</span>
            </a>
          </li>
        </ul>
      </div>

      <div class="col-md-10 display-table-cell valign-top box">
        <div class="row">
          <header id="nav-header" class="clearfix">
            <div class="col-md-5">
              <input type="text" id="header-search-field" placeholder="Search for anything" />
            </div>

            <div class="col-md-7">
              <ul class="pull-right">
                <li class="welcome">Welcome to your administration area</li>
                <li class="fixed-width">
                  <a href="#">
                    <span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
                    <span class="label label-warning">3</span>
                  </a>
                </li>

                <li class="fixed-width">
                  <a href="#">
                    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                    <span class="label label-message">3</span>
                  </a>
                </li>

                <li>
                  <a href="#" class="logout">
                    <span class="glyphicon glyphicon-logout" aria-hidden="true"></span>
                    logout
                  </a>
                </li>
              </ul>
            </div>
          </header>
        </div>

        <div class=row>
          <footer id="admin-footer" class="clearfix">
            <div class="pull -left"> Copyright 2017</div>
            <div class="pull-right"> B01 Media- Blog Admin Panel</div>
          </footer>
        </div>
      </div>
    </div>
  </div>


  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
</body>
</html>
</html>

CSS

    html, body {
  font-family: "open sans", "helvetica neue",Arial, Helvetica, sans-serif;
  background-color: #f3f3f4;
  color: #676a6c;
  height: 100%;
}

.box {
  border: 3px red dotted;
}

#side-menu {
  background-color: #2f4050;
  padding: 0px;
}

  #side-menu h1 {
    color: #1f3647;
    text-align: center;
    margin: 10px 0px;
    font-size: 25px;
    height: 100%;
  }

.display-table {
  display: table;
  padding: 0px;
  height: 100%;
  width: 100%;
}

.display-table-row {
  display: table-row;
  height: 100%;
}

.display-table-cell {
  display: table-cell;
  height: 100%;
  float: none;
}

.valign-top {
  vertical-align: top;
}

#nav-header {
  background-color: #fff;
  border-bottom: 1px solid #e7eaec;
}

  #nav-header #header-search-field {
    padding-top: 17px;
    vertical-align: central;
    border: none;
    width: 300px;
    outline: none;
  }

  #nav-header ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    color: #676a6c;
  }

    #nav-header ul li {
      float: left;
      margin-left: 15px;
      padding: 17px 0px;
    }

    #nav-header ul glyphicon {
      color: #676a6c;
    }

.label-message {
  background-color: #1ab394;
}

#nav-header ul a {
  text-decoration: none;
}

#nav-header .logout {
  color: #676a6c;
}

  #nav-header .logout:hover {
    color: #676a6c;
  }

#nav-header #welcome {
  margin-right: 20px;
}

#nav-header ul .label {
  position: absolute;
  margin-top: -10px;
  margin-left: -5px;
}

#nav-header .fixed-width {
  width: 35px;
}

#admin-footer {
  position: absolute;
  width: 100px;
  bottom: 0px;
  background-color: #fff;
  padding: 10px;
  font-size: 12px;
  color: #676a6c;
}

非常感谢。

Answer 1

尝试从height: 100%;开始#side-menu h1。这会将您的glyphicons放在导航区域框内而不是它下面

#side-menu h1 {
    height: auto;
}

如何在Bootstrap中正确对齐LI类？

1 个答案: