Question

我在rails应用程序中使用简单的bootstrap形式。我试图弄清楚如何在我的表单中设置单选按钮的样式。 “是”和“否”的单选按钮位于彼此的顶部（非常靠近按钮字段）。我想为每个片段添加填充（因此按钮和标签之间的空间，然后两个选项之间的空间更大。

我试过这个（看看我是否可以强制将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文档，我无法从中找出答案）然后，如何为每个组件添加填充属性的组件（因此按钮本身和标签之间会有填充，然后在是和否选项之间有更多的填充）？

谢谢

Answer 1

首先，从＆＃39;创建项目＆＃39;更改您的CSS类到＆＃39;创建项目＆＃39;

然后尝试这样的事情：

.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，或右键单击 - ＆gt;检查元素）。这个工具可以让你深入了解simple_form_for如何构建DOM。

Answer 2

表单元素中的类名是＆＃34;创建项目＆＃34;，但CSS类是createproject。你试过删除前者的空间吗？

使用Simple Form for Bootstrap在rails上设置CSS样式

2 个答案: