首页 文章

如何制作侧边栏?

提问于
浏览
1

我想更改我的博客的视图 . 一切都是编程的,我留下了前端 . 然而,我并不完全了解样式和引导程序 . 我想更改视图,以便有一个侧边栏显示存档,标签和其他必要的补充博客功能,以改善导航 . 我的顶部已经有一个导航栏,但我想在文章和主要文本的左侧或右侧创建侧边栏 . 不知何故,当我尝试在我的应用程序布局文件中使用网格系统时,应该是侧边栏显示在文章的顶部或底部而不是左侧或右侧 . 这是我的主要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文件(我希望<%= yield%>的输出位于侧边栏的左侧或右侧:

<!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,<%= yield%>内容的一个例子:

<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>

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

1 回答

  • 0

    假设您使用的是最新版本的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>
    

    你的缩进很有趣,很抱歉,如果我有点偏 .

相关问题