ruby-on-rails - 使用 Rails/Bootstrap 布局将视图定位到侧边栏的右侧
问题描述
我正在使用 Rails 5.2 和 Bootstrap 4 构建一个 Web 应用程序,但在基本布局到位时遇到了一些麻烦。
我想要的是将每个视图的内容移动到侧边栏的右侧。即“您的公司”。
有人可以帮我指出正确的方向,以便我的所有视图都在应用程序视图“内部”,即导航下方和侧边栏的右侧。
谢谢!:)
以下是应用程序当前的外观:
这是我的application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
</div>
</div>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="span10">
<!--Body content-->
<%= yield %>
</div>
</body>
</html>
这是我的companies
观点(与上面屏幕截图中的示例相同)。
<div class="container">
<h1>Your Companies</h1>
<button>
<%= link_to 'Create New Company', new_company_path %>
</button>
<table>
<tr>
<th>Title</th>
<th>Text</th>
<th></th>
</tr>
<% @companies.each do |company| %>
<tr>
<td><%= company.title %></td>
<td><%= company.text %></td>
<td><%= link_to 'View Company', company_path(company) %></td>
<td><%= link_to 'Edit Company', edit_company_path(company) %></td>
<td><%= link_to 'Delete Company', company_path(company),
method: :delete,
data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</table>
</div>
解决方案
我猜你想做这样的事情:
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
<div class="col-sm-8 col-md-9">
<!--Body content-->
<%= yield %>
</div>
</div>
</div>
</body>
</html>
container
此外,从您的companies/index.html.erb
文件中删除该类。
推荐阅读
- swiftui - 在 SwiftUI 中制作动态、可编辑的简单对象列表的最简单方法是什么?
- xcode - 根据浅色/深色模式更改 iMessage 贴纸包资产?
- gcc - MIPS32 目标的交叉编译源代码
- hibernate - Hibernate Full text Serch - 按相关性排序结果
- reactjs - React-Redux 导出多个连接组件
- linux - 将socat自带的数据写入文件
- react-native - 在容器内反应原生容器
- python - Python re,从字符串数组中删除
- javascript - 我开始学习 JavaScript,但我的 if 语句有问题
- node.js - 将 Angular Universal 部署到 Heroku 时出现“找不到模块 '/app/dist'”错误