Question

我想更改博客的视图。一切都是编程的，我留在前端。然而，我并不完全了解样式和引导程序。我想更改视图，以便有一个侧边栏显示存档，标记和其他必要的补充博客功能，以改善导航。我的顶部已经有一个导航栏，但我想在文章和主要文本的左侧或右侧创建侧边栏。不知何故，当我尝试在我的应用程序布局文件中使用网格系统时，应该是侧边栏显示在文章的顶部或底部而不是左侧或右侧。这是我的主要scss文件：/customstyling.css.scss

 @import "bootstrap-sprockets";
 @import "bootstrap";
 /* mixins, variables */
 /* universal */
 html {
 overflow-y: scroll;
  }
 body {
 padding-top: 60px;
   }
 section {
  overflow: scroll;
   }
 textarea {
 resize: vertical;
 }
 .center {
 text-align: center;
 h1 {
 margin-bottom: 10px;
  }
 }
 /* typography */

 h1, h2, h3, h4, h5, h6 {
 line-height: 1;
 }
 h1 {
 font-size: 3em;
 letter-spacing: -2px;
 margin-bottom: 30px;
 text-align: center;
  }
 h2 {
 font-size: 1.2em;
 letter-spacing: -1px;
 margin-bottom: 30px;
 text-align: center;
 font-weight: normal;
 color: #777
   }
 p {
 font-size: 1.1em;
 line-height: 1.7em;
  }
  /* 
  footer{
  position: fixed ;
  height: 100px;
  bottom: 0 ;
  width: 100%
  div ul li{
 display:block;
 vertical-align: top;
 width: 50%;
 float: left;
 }
 }  */
 @mixin box_sizing {
 -moz-box-sizing:    border-box;
 -webkit-box-sizing: border-box;
 box-sizing:         border-box;
  }
 /* miscellaneous */
 .debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
 @include box_sizing;
  }
 /* forms */
  input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
    }
  input {
  height: auto !important;
   }
  #error_explanation {
  color: red;
  ul {
  color: red;
  margin: 0 0 30px 0;
  }
   }
 .field_with_errors {
  @extend .has-error;
 .form-control {
  color: $state-danger-text;
   }
   }

这是我的布局/ apllication.html.erb文件（我希望＆lt;％= yield％＆gt;的输出位于侧边栏的左侧或右侧：

  <!DOCTYPE html>
  <html>
  <head>
   <title><%= full_title(yield(:title)) %></title>
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>
    </head>
      <body>
      <%= render 'layouts/header' %>
      <div class="container">
      <% flash.each do |message_type, message| %>
      <div class="alert alert-<%= message_type %>"><%= message %></div>
      <% end %>
       <%= yield %>
       <hr>
       <h6>
       <% if logged_in? %>
        <%= "Logged in as #{current_user.email}" %>
        <%= link_to "Log out", logout_path %>
        <% else %>
         <%= link_to "Log in", login_path %> if you are  one of our bloggers
         <% end %>
          </h6>
        </div>
        <%= debug(params) if Rails.env.development? %>
       </body>
       </html>

这是我的文章/ index.html.erb，＆lt;％= yield％＆gt;的一个示例内容：

<h1>All Articles</h1>
<ul id="articles">
<% @articles.each do |article| %>
<li>
  <h4><%= link_to article.title, article_path(article) %></h4>
 <% if article.image.exists? %>
<%= image_tag article.image.url %>
<% end %>
  <p>
  <%= article.body %></p>
  <p><small><strong> Date:</strong> <%= article.created_at.to_s %></p></small>
</li>
 <% end %>
</ul>
<h3>Archives </h3>
<% if @posts.to_a.empty? %>
<div class="post">
<p>No articles found...</p>
</div>
<% else %>
<% current_month = 0 %>  
<% current_year = 0 %>
<% for article in @posts %> 
 <% if (article.created_at.year != current_year)
 current_year = article.created_at.year %>
<h3 class="archiveyear"><%= article.created_at.year%></h3>
<% end %>
<% if (article.created_at.month != current_month || article.created_at.year != current_year) 
current_month = article.created_at.month 
current_year = article.created_at.year %>  
<h4 class="archivemonth"><%= (Date::MONTHNAMES[article.created_at.month]) %></h4>
<% end %>
<div class="archivepost">
<%= link_to article.title, article_path(article) %> on <%= article.created_at.strftime('%A')%> -   <%= article.created_at.strftime('%d') + "th"%>
</div>
<% end -%>
<%end %>
<hr>
<h6>
<% if logged_in? %>
<%= link_to "Create a New Article", new_article_path, class: "new_article" %>
<% end %>
</h6>

。我尝试使用自举网格系统，侧边栏位于span3，主体内容位于导航栏下方span8，但侧边栏和正文内容并未出现。相反，一个在另一个的顶部。在我的自定义样式文件或我的articles / index.html.erb和其他视图中出了点问题。非常感谢你的帮助！穆萨

Answer 1

假设您使用的是最新版本的Bootstrap，则需要包装连续的内容。试试这个：

<div class="row">
  <div class="col-md-8">
    <!-- paste the regular page contents here -->
  </div>
  <div class="col-md-3">
    <!-- paste the sidebar contents here -->
  </div>
</div>

所以在你的情况下：

  <!DOCTYPE html>


<html>
  <head>
   <title><%= full_title(yield(:title)) %></title>
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>
    </head>
      <body>
      <%= render 'layouts/header' %>
      <div class="container">
      <% flash.each do |message_type, message| %>
      <div class="alert alert-<%= message_type %>"><%= message %></div>
      <% end %>

       <div class="row">
         <div class="col-md-8">
           <%= yield %>
         </div>
         <div class="col-md-3">
           <!-- sidebar content goes here -->
         </div>
       </div>

       <hr>

       <h6>
       <% if logged_in? %>
        <%= "Logged in as #{current_user.email}" %>
        <%= link_to "Log out", logout_path %>
        <% else %>
         <%= link_to "Log in", login_path %> if you are  one of our bloggers
         <% end %>
        </h6>
        </div>
        <%= debug(params) if Rails.env.development? %>
    </body>
  </html>

你的缩进很有趣，如果我稍微离开，那就很抱歉。

如何制作侧边栏？

1 个答案: