Question

我正在尝试让ratyrate与Bootstrap合作。

如果我在应用程序布局中禁用所有样式，但是当我启用bootstrap时，它会在不同的行/段落上显示每个星形，如下所示：

（*）
（*）
（*）

而不是：（*）...（*）...（*）

（参见评论链接到屏幕截图）。

我尝试在引导程序“form-inline”类中包装rating_for调用，但它不起作用，请参阅show.html.erb代码：

...
<p><strong>User:</strong>
  <%= @user_activity.user_id %>
  <strong>Activity:</strong>
  <%= @user_activity.activity_id %>
</p>

Rating  : 
<form class="form-horizontal">
  <div class="form-control" >
    <div class="control-group inline">
      <%= rating_for @user_activity, "rating", disable_after_rate: false %>
    </div>
  </div>
</form>

<%= link_to 'Edit', edit_user_activity_path(@user_activity) %> |
<%= link_to 'Back', user_activities_path %>
...

'application.css.scss'是：

// import the CSS framework
@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-slider";

.inline {
    display:inline-block !important;
}

'application.js'是：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
//= require jquery.raty
//= require ratyrate
//= require bootstrap-slider

如何覆盖CSS以在单个水平对齐上获得星星？

Answer 1

决议：＆lt; img＆gt;标签是从bootstrap继承.img-responsive！

所以，我和一位建议如下的朋友交谈过：

好吧，我不知道如何修复，但我会告诉你我采取了哪些措施来解决这些问题。

1）检查我是否已经加载了我正在使用的特定库的样式表（你确定你在页面上有ratyrate.css吗？）

2）在没有加载引导程序的情况下尝试它 - 它是否有效？

3）假设存在样式冲突并尝试找到它：


在Google Chrome中加载页面

右键单击已损坏的物体（在您的情况下为星星），然后单击“检查元素”

在右侧选项卡上，您会看到一个样式列表

开始勾选并取消各种打印，直到找到造成一切破坏的那个。


一旦您知道哪种样式导致了问题，您就可以编写一种新样式来覆盖它。简单:)（他说！）

希望有所帮助！

我按照他的说法做了，发现了违规的CSS项目。禁用＆＃39; display：block;＆＃39;使星星水平对齐。万岁！我还可以在Chrome的检查元素工具中看到＆lt; img＆gt;标签说.img-responsive正在被使用。

搜索＆＃34; img_responsive＆＃34;在＆＃39; framework_and_overrides.css.scss＆＃39;中找到了这个条目。文件

// make all images responsive by default
img {
  @extend .img-responsive;
  margin: 0 auto;
  }

评论＆＃34; @extend ...＆＃34;线，它的效果很好： - ）

// make all images responsive by default
img {
  // @extend .img-responsive;
  margin: 0 auto;
  }

猜猜我现在需要让每个图像单独响应，但至少我的星星是对齐的！

P.S。我删除了所有＆lt;形式＆gt;和＆lt; div> ＆＃39;＆lt;％= ratings_for ...％＆gt;周围的标签在原始问题中打电话，因为他们不需要。

使用自举时，Ratyrate星星垂直显示

1 个答案: