Question

我正在开发一个ruby on rails和bootstrap的应用程序，我的问题是菜单和横幅之间出现空白。

application.css.scss

@import "jquery-ui";
@import "normalize-rails";
@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-material-design";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "ripples";
@import "footer";

$border-hover-color: rgba(0, 0, 0, 0.3);

* {
    border: 0;
    margin: 0;
    padding: 0;
}

html {
  position: relative;
}

body {
    background: #fff;
}

.banner-box {
  position: relative;
  height: 600px;
  background-image: url(/assets/bird-bg.jpg);
  background-size: auto 600px;
  background-position: top center;
  background-attachment: fixed;
  overflow: hidden; 
}

Rails中的application.html.erb代码

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=devise-width, initial-scale=1">
  <title>Simple IN</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <%= csrf_meta_tags %>
</head>
  <body>
    <% if notice %>
      <div id="message_wrapper">
        <p class="notice"><strong>¡Bien hecho!</strong> <%= notice %></p>
      </div>
    <% elsif alert %>
      <div id="message_wrapper">
        <p class="alert"><strong>¡Ocurrió un problema!</strong> <%= alert %></p>
      </div>
    <% end %>
    <%= render 'shared/nav' %>
    <div class=""">
      <%= yield %>  <---- (page#index banner)
    </div>
    <%= render 'shared/footer' %>
  </body>
</html>

nav.html.erb

<div class="navbar navbar-warning">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="javascript:void(0)">Simple IN</a>
    </div>
    <div class="navbar-collapse collapse navbar-warning-collapse">
        <ul class="nav navbar-nav navbar-right">
            <% if(!user_signed_in?) %>
              <li><%= link_to new_user_session_path do %>
                  <i class="material-icons right">keyboard_arrow_right</i> Ingresar
                  <% end %>
              </li>
            <% else %>
              <li><%= link_to new_user_session_path do %>
                    <i class="material-icons right">sms</i> Mensajes
                  <% end %>
              </li>
              <li><%= link_to new_user_session_path do %>
                    <i class="material-icons right">live_help</i> Ayuda
                  <% end %>
              </li>
              <li>
                  <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown"><%= avatar_for(current_user, size: 25) %> <%= current_user.name %>
                    <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><%= link_to 'Dashboard', dashboards_path %></li>
                    <li><%= link_to 'Editar Perfil', edit_user_registration_path %></li>
                    <li class="divider"></li>
                    <li><%= link_to 'Cerrar sesión', destroy_user_session_path, method: :delete %></li>
                  </ul>
              </li>
            <% end %>
        </ul>
    </div>
  </div>
</div>

查看页面控制器的Index.html.erb

<div class="banner-box">

</div>
<br>
<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>
</div>
<br>
<div class="banner-small-box">

</div>

感谢您的帮助！

菜单栏和视差横幅之间的空白区域（Rails App）

0 个答案: