使用 Bootstrap 的简单表单在 Rails 上设置 CSS 样式答案

【问题标题】：CSS styling on rails with Simple Form for Bootstrap使用 Bootstrap 的简单表单在 Rails 上设置 CSS 样式
【发布时间】：2014-08-25 05:25:08
【问题描述】：

我在我的 Rails 应用程序中使用简单的引导形式。我试图弄清楚如何在我的表单中设置单选按钮的样式。 Yes 和 No 的单选按钮在彼此的顶部（并且非常靠近按钮字段）。我想为每个段添加填充（所以按钮和标签之间有空间，然后两个选项之间有更多空间。

我试过这个（看看我是否可以强制 CSS 样式进入我的表单。它根本不起作用（文本甚至没有改变字体粗细 - 这是我测试它是否有效） )。

<%= f.collection_radio_buttons :project_image, [[true, 'Yes'] ,[false, 'No']], :first, :last, {},  {:class => "create project"}  %>

我有一个用于定义此类的项目的 css.scss 文件：

.createproject {
  font-weight: normal;
  padding-right: 20px;
}

我的第一个问题是如何将 CSS 样式添加到 Simple Form 组件（是的，我已阅读 Simple Form 文档，但我无法从中找出答案），然后，如何为每个组件添加填充属性（所以按钮本身和标签之间会有填充，然后是和否选项之间会有更多的填充）？

谢谢

【问题讨论】：

请尝试这样写：<%= f.collection_radio_buttons :project_image, [[true, 'Yes'] ,[false, 'No']], :first, :last, {:class => "createproject"} %>
嗨，Anusha，我试过这样但它不起作用（没有采用样式效果），并且在它之前添加 {}（作为 :object 字段的空占位符）。我找不到任何用于设置简单表单引导表单样式的资源。这让我疯狂。无论如何感谢您的尝试。

标签： ruby-on-rails twitter-bootstrap simple-form

【解决方案1】：

首先，将您的 CSS 类从“创建项目”更改为“创建项目”

然后尝试这样的事情：

.create-project {
  font-weight: normal;
  padding-right: 20px;

  input {  
    margin: 5px 5px 0px 5px;
  }

  label {
    margin-right: 20px;
  }
}

要设置单选按钮的样式（而不是表单中的所有输入和标签），您可以执行以下操作：

.create-project {
  font-weight: normal;
  padding-right: 20px;

  input[type=radio] {  
    margin: 5px 5px 0px 5px;
  }

  label.radio {
    margin-right: 20px;
  }
}

听起来您可能没有使用浏览器 CSS 编辑工具来调整元素样式（F12，或右键单击 -> 检查元素）。这个工具应该让您深入了解 simple_form_for 是如何构建 DOM 的。

【讨论】：

嗨马克西姆斯。非常感谢您的回复。那行得通。如何在按钮和文本之间插入空格。默认情况下，它们彼此重叠。谢谢！
尝试分配“display: inline-block;”到输入

【解决方案2】：

表单元素中的类名是“create project”，但 CSS 类是 createproject。您是否尝试过删除前者中的空间？

【讨论】：