Question

由于某些原因，我的container div没有覆盖整个页面。值得注意的是我正在使用Bootstrap gem。如何让这个div占用整个HTML页面？

application.html.erb

<!DOCTYPE html>

<html>
<div class="container">
<head>
  <title>dylan e. richards</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <%= javascript_include_tag 'application' %>
  <%= javascript_include_tag :defaults %>
  <%= stylesheet_link_tag    "application", media: "all" %>


</head>
<body>
  <% flash.each do |name, msg| %>
       <%= content_tag(:div, msg, class: "alert alert-info") %>
  <% end %>

  <%= render 'layouts/navbar' %>
  <% if !current_user %>
    <%= link_to 'admin login', new_user_session_path, class: 'btn btn-default btn-xs' %> 
  <% else %>
    <%= link_to "logout", destroy_user_session_path, :method => :delete, class: 'btn btn-xs btn-default' %>


  <% end %>
  <%= yield %>


</body>
</div> <!-- END container -->
</html>

styles.css.scss

nav {
    margin-bottom: 10px;
    margin-top: 10px;
}

.navspan {
    width: auto;
    height:3px;
    background-color: #333;
    clear: both;
    margin-bottom: 10px;

}

.postdate {
    text-align: center
}

btn-primary {
    background-color: #000
}

.container {
    font-family: "Droid Serif", "serif";
    background-color: #FDFBF5;
}



.highlight {
    color: #1abc9c;
 }


.underline {
    color: #333;
    border-bottom: 1px solid #f39c12;
    border-width: 2px;
    padding-bottom: 3px;

}

 #post {
    margin: 0 auto;
    max-width: 42.5em;
 }


 .posttitle {

    text-align: center;
 }


.span {
    background-color: #f39c12;
    height: 1px;
    width: 100%;
    margin-bottom: 20px;
}

 .postdate {
    text-align: center;
    color: #999;
 }



 a:link {color:#16a085;}      /* unvisited link */
 a:visited {color:#2c3e50;}   /* visited link */
 a:hover {color:#1abc9c;}     /* mouse over link */
 a:active {color:#0000FF;}    /* selected link */

Answer 1

将<div class="container">放在<body>标记之后，移动相应的</div>代码，使其位于</body>内。

Answer 2

在</div> 

之前移动</body>

Answer 3

您需要在体内设置div“容器”并且

Answer 4

要在bootstrap中填充整个页面，您需要使用div上的container-fluid类

<div class="container">

变为

<div class="container-fluid">

您需要将<div>放在<body>内

容器div不覆盖整个页面

4 个答案: