Question

我的HTML中有一个着陆部分，我在着陆下方有图标。我无法弄清楚为什么图标会一直出现在我的登陆div中。我已多次检查未封闭的标签。我想我需要另一双眼睛。这是我的HTML：

<!DOCTYPE html>
<html>
    <head>
      <title>Fitness Food Tracker</title>

      <script src="vendor.bundle.js" type="text/javascript" charset="utf-8" defer></script>
      <script src="bundle.js" type="text/javascript" charset="utf-8" defer></script>
      <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body class="container-fluid">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img class="brand" alt="Brand" src="assets/styles/apple.png"></a>
          </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="material-icons">account_circle</i> <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#" id="nav-sign-up">Sign Up</a></li>
                  <li><a href="#" id="nav-sign-in">Sign In</a></li>
                  <li class="hidden" id="nav-li-user-stats"><a href="#" id="nav-user-stats">Update User Stats</a></li>
                  <li class="hidden" id="nav-li-sign-out"><a href="#" id="nav-sign-out">Sign Out</a></li>
                  <li class="hidden" id="nav-li-change-password"><a href="#" id="nav-change-password">Change Password</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>


        <div class='landing'>
          <!--- Sign Up Form ---->
          <form class="form-horizontal hidden" id=sign-up-form>


            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
              <div class="col-sm-6">
                <input type="email" class="form-control" name="credentials[email]" id="inputEmail3" placeholder="Email">
              </div>
            </div>

            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
              <div class="col-sm-6">
                <input type="password" class="form-control" name="credentials[password]" id="inputPassword3" placeholder="Password">
              </div>
            </div>

            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">Confirm Password</label>
              <div class="col-sm-6">
                <input type="password" name="credentials[password_confirmation]" class="form-control" id="inputPassword3" placeholder="Password Confirmation">
              </div>
            </div>

            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign Up</button>
              </div>
            </div>

          </form>
          <!-- Update User -->
          <form id='update-user-form' class='hidden'>

            <div class="form-group row">
              <label for="weight-input" class="col-sm-2 form-control-label">Weight</label>
              <div class="col-sm-10">
                <input type="" class="form-control" id="weight-input" name="user[weight]" placeholder="Enter Your Weight">
              </div>
            </div>

            <div class="form-group row">
              <label for="height-input" class="col-sm-2 form-control-label">Height</label>
              <div class="col-sm-10">
                <input type="" class="form-control" id="height-input" name="user[height]" placeholder="Enter Your Height">
              </div>
            </div>

            <div class="form-group row">
              <label for="age-input" class="col-sm-2 form-control-label">Age</label>
              <div class="col-sm-10">
                <input type="" class="form-control" id="age-input"  name="user[age]" placeholder="Enter Your Age">
              </div>
            </div>

            <div class="form-group row">
              <label for="gender-input" class="col-sm-2 form-control-label">Gender</label>
              <div class="col-sm-10">
                <input type="" class="form-control" id="gender-input" name="user[gender]" placeholder="Enter Your Gender (m or f)">
              </div>
            </div>

            <div class="form-group row">
              <label for="activity-input" class="col-sm-2 form-control-label">Activity Level</label>
              <div class="col-sm-10">
                <input type="" class="form-control" id="activity-input" name="user[activity_level]" placeholder="Enter Acitivty Multiplier">
              </div>
            </div>

            <button type="submit" class="btn btn-primary auth-form-element">
              Submit Your Info
            </button>

          </form>
          <!-- Sign In form -->
          <form class="form-horizontal hidden" id=sign-in-form>

            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
              <div class="col-sm-6">
                <input type="email" class="form-control" name="credentials[email]" id="inputEmail3" placeholder="Email">
              </div>
            </div>

            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
              <div class="col-sm-6">
                <input type="password" class="form-control" name="credentials[password]" id="inputPassword3" placeholder="Password">
              </div>
            </div>

            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign In</button>
              </div>
            </div>

          </form>

          <div class="jumbotron">
            <div class="container">
              <h1 class='landing-header'>Fitness Food Tracker</h1>
              <h3>An App For Tracking Your Calories and Maintaining Your Physique.</h3>
            </div>
          </div>

        </div>






        <!---Below Landing --->

        <!-- Food Search-->
        <div class="col-md-6 search-input hidden">
          <label>Search For Food</label>
          <div class="input-group">
            <input type="text" id='search-input-field' class="form-control" placeholder="Search for foods">
            <span class="input-group-btn">
              <button class="btn btn-primary" id='food-search-btn' type="button">Search!</button>
            </span>
          </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->

        <!-- Meal Builder Display-->
          <div id="meal-content" class='hidden'>

            <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                <li class="active"><a href="#red" data-toggle="tab">Search Results</a></li>
                <li><a href="#orange" data-toggle="tab">Your Meal</a></li>
            </ul>

            <div id="my-tab-content" class="tab-content">
                <div class="tab-pane active" id="red">
                  <div class="search-table table-responsive table-bordered hidden">
                  </div>
                </div>
                <div class="tab-pane" id="orange">
                  <div class="meal-table table-responsive table-bordered hidden">
                    <table class="table table-condensed">
                      <tr>
                        <th class='hidden'>id</th>
                        <th>Description</th>
                        <th>Calories</th>
                        <th>Grams Per Serving</th>
                        <th>Fat Mono</th>
                        <th>Fat Poly</th>
                        <th>Fat Sat</th>
                        <th>Carbs</th>
                        <th>Sugar</th>
                        <th>Fiber</th>
                        <th>Protien</th>
                        <th>Sodium</th>
                        <th>Cholesteral</th>
                      </tr>
                    </table>
                  </div>
                  <label> Meal Macro Totals</label>
                  <div class="meal-total-table table-responsive table-bordered hidden">
                    <table class="table table-condensed">
                    </table>
                  </div>
                </div>
            </div>
        </div>

          <div class='col-md-4 icon-div'>
            <i class="material-icons icon">create</i><br>
            Log Your Meals
          </div>
          <div class='col-md-4 icon-div'>
            <i class="material-icons icon">fitness_center</i><br>
              Maintain Your Fitness
          </div>
          <div class='col-md-4 icon-div'>
            <i class="material-icons icon">track_changes</i><br>
            Track Changes Over Time
          </div>
    </body>
</html>

编辑：

这是我的CSS：

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

$orange: #EB8921;
$lite-orange: #F5AD28;
$white: #FFFFFF;
$gray: #2E2F2F;
$darker-gray: #1E1E1E;
$black: #000000;

body {
  font-family: 'Montserrat', sans-serif;
  background-color:  $gray;
  color: $lite-orange;
};

.landing {
  background-image: url("http://wallpapercave.com/wp/EnDM8YS.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  min-width: 100%;
  margin-top: 5%;
  height: 600px;
}

form {
  width: 40%;
  margin: 0 auto;
}

#meal-content {
  margin-top: 8%;
}

.landing-header {
  color: $orange;
}

.icon-div {
    text-align: center;
    background-color: $gray;
}

.icon {
  padding-top: 10%;
  font-size: 8em;
  color: $white;
  margin-bottom: 5%;
}

.jumbotron {
  background: rgba(0, 0, 0, 0);
  text-shadow: .25px 0 0 $black, -.25px 0 0 $black, 0 .25px 0 $black, 0 -.25px 0 $black, .25px .25px $black;
  padding-top: 10%;
  padding-bottom: 30%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
}

.btn-primary {
  background: $orange;
  border-color: $black;
}

.table-responsive {
  max-height: 400px;
  overflow: auto;
  font-size: .75em;
  margin-left: 5%;
  margin-right: 5%;
  background-color: $darker-gray;
  margin-bottom: 10%;
}

.input-group-sm {
  min-width: 50px;
}

.search-input {
  margin-bottom: 10%;
  padding-top: 10%;
  float: none;
  margin-right: auto;
  margin-left: auto;
}

.add-food-btn {
  border-radius: 100%;
}

.table {
  border: $black;
}

.a.dropdown-toggle {
  padding: 0 !important;
}

.brand {
  height: 100%;
  margin: 5%;
}

.navbar-brand {
  padding: 0;
  margin-bottom: 5%;
}

Answer 1

这里的问题是图标最后位于导航栏后面，因为导航栏是固定的。只需在主体上添加padding-top就可以在导航栏下创建一些空白并修复问题。

出现在div中的元素不应该是：HTML

1 个答案: