如何使用动态 Ruby on Rails 创建列？答案

【问题标题】：How to Create Columns with Dynamic Ruby on Rails?如何使用动态 Ruby on Rails 创建列？
【发布时间】：2018-02-15 13:58:39
【问题描述】：

如何组织 css 以使 <%= averaged.name %>(<%= averaged.metric %>) 的每次迭代都是一个新列？

averaged.name (averaged.metric) 有很多结果。每个结果在其各自的列中都有自己的行。

前：

NAME(METRIC) | NAME(METRIC) | NAME(METRIC) etc...
RESULT       | RESULT       | RESULT      
RESULT       | RESULT       | RESULT    
RESULT       | RESULT       | RESULT
etc...

使用此代码，我可以获取结果行，但不能获取名称（度量）列。后者显示为新闻行也沿着页面向下而不是穿过它。

<table>
  <% @averaged_quantifieds.each do |averaged| %>
    <% if averaged.user == current_user %>      
      <th><%= averaged.name %>(<%= averaged.metric %>)</th>
     <% averaged.results.each do |result| %>
      <tr><td><%= result.result_value %></td></tr>
     <% end %>
    <% end %>
  <% end %> 
</table>

quantifieds.css.scss

select {
  width: 30.1%;
  border: 1px solid #cccccc;
  background-color: #ecf0f1;
}

.america {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.america2 {
  padding-top: .7em;
}

.america3 {
  float: right;
}

.btn-group {
  background: #c0392b;
  border: #000;
  border-radius: 8px;
  font-family: verdana, arial, helvetica, sans-serif;
  color: #ffffff;
  font-size: 15px;
  padding: 8px 18px 8px 18px;
  text-decoration: none;
}

.deadline {
  width: 8%
}

.goal {
  width: 70%
}

td {
  padding-top: .7em;
  padding-bottom: .7em;
  padding-left: .7em;
  padding-right: .7em;
}

.btn {
  background: #c0392b;
  border: #000;
  border-radius: 8px;
  font-family: verdana, arial, helvetica, sans-serif;
  color: #ffffff;
  font-size: 15px;
  padding: 8px 18px 8px 18px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.btn:active{
  color: #FFFFFF;
}

.values-button {
  margin-top : -9px;
  margin-left : 10px; 
}

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

$body-bg:                         #ecf0f1;
$font-family-sans-serif:          'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$navbar-height:                   45px;
$navbar-default-bg:               white;
$navbar-default-brand-color:      #c0392b;
$brand-primary:                   #000;
$jumbotron-bg:                    #FFFFFF;

@import 'bootstrap-sprockets';
@import 'bootstrap';

.center {
     text-align: center;
}

.navbar-brand {
     font-weight: bold;
}

a {
  &:hover {
    color: #666;
    text-decoration: none;
  }
}

提前感谢您的帮助！我很难理解如何使用 Ruby on Rails 的活力来格式化 css/html 表格，所以如果您有任何可以帮助我学习的好资源，我将不胜感激。再次感谢！

【问题讨论】：

目前还不清楚您期望得到什么样的结果。您的示例输出看起来像您所描述的您不想要的东西。你说你想要多列，但是有多少？您希望输出多少个result？是可变数吗？您可能希望在输出中使用示例数据。如果在您的示例代码中不显示 CSS 和 Bootstrap，则无法了解 CSS 和 Bootstrap 是否正在改变您的布局。您的问题与 HTML 表格输出有关，而不是 CSS/Bootstrap。
@sealocal 用户可以创建多个结果。为了澄清它们是结果模型，它由名称、度量和结果值组成。 EX 跑（英里）1.2、2、6。results 是一个可变数字，具体取决于用户提交的内容，并且在results 表单中，用户可以拥有多个result_values。我会说 5 results 在一行上是我最想要的，以避免 results 跑出页面。为了澄清名称（指标）将横向运行，result_value 在页面下方运行。
@sealocal 我一直在使用引导程序
，但仍然无法解决这个问题。我在上述问题中添加了引导资产。感谢您的帮助！
也许我误解了你的问题，但据我所知，你的代码会打印一个 th 元素，然后是多个 tr 元素，每个元素都有一个值。您的代码看起来应该返回您要求的预期表格。如果您想将 CSS（或 Bootstrap）应用到您的表格，那么您必须将 class 和 id 属性分配给您的 HTML 标记。您还没有显示这些，因此 Bootstrap 似乎对您的代码没有任何影响。您的代码没有显示您提到的div。如果您希望其他人进一步参与，我建议您粘贴表格的 HTLM 输出。
顺便说一句，既然你要求学习资源，Code School 有很好的视频内容，最近推出了 Bootsrap 课程。他们在这里显示折扣订阅：mbsy.co/CodeSchool/12141376?url=https://www.codeschool.com/…