Question

我正在使用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>

Answer 1

我猜你想做这样的事情：

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

Answer 2

在使用 bootstrap 4 时，应使用float-right类将内容浮动到右侧。

<div class="container float-right">
  --------content--------
</div

更多信息here

使用Rails / Bootstrap布局将视图定位在侧边栏的右侧

2 个答案: