时间戳

首页 > 解决方案 > 为什么一个徽章在 ruby​​ on rails 5 上的媒体 991 中的行为与其他徽章不同？

bootstrap-4 - 为什么一个徽章在 ruby​​ on rails 5 上的媒体 991 中的行为与其他徽章不同？

问题描述

我有这段代码，当在 767px 到 991 时移动到选项卡的中间。是所有联系人旁边的一个，但其他 3 个表现得非常好。

Here is the code:

  <div class="col-md-3">

          <div class="list-group">
            <!-- set active links-->
            <% active = params[:group_id] == nil ? 'active' : '' %>

            <%= link_to contacts_path, class: "list-group-item #{active}" 
do %>
              All Contacts**<span class="badge"><%= Contact.count %> 
</span>**         
            <% Group.all.each do |group| %>
            <% active = params[:group_id].to_i == group.id ? 'active' : '' 
 %>
            <%= link_to contacts_path(group_id: group.id), class: "list- 
 group-item #{active}" do %>
             <%= group.name %><span class="badge"><%= group.contacts.count 
    %></span>
            <% end %>
            <% end %>
            <% end %>
            <% end %>

          </div>

    application.scss

  * It is generally better to create a new file per style scope.
  *
  *= require_tree .
  *= require_self

  *= require jasny-bootstrap.min

  */

  @import "bootstrap-sprockets";
  @import "bootstrap";

  body {
      padding-top: 70px;
      background: #eee;
 }

 .navbar {
  -moz-box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0;
  box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0;
}
.navbar .navbar-brand {
  font-weight: bold;
  letter-spacing: -1px;
  font-size: 20px;
  color: white;

};

.navbar-right {    
  margin-right: 0;

} .btn .btn-default{ 边距顶部：5；}

.table tbody>tr>td.middle { 垂直对齐：中间；}

.media { 填充：10px 0; }

.media img, .fileinput .thumbnail, .thumbnail img { 边界半径：50%; }

.media-left { 填充：0 20px; }

. 媒体标题 { 颜色：#dd5638; 边距底部：10px；}

.media-body { padding-top: 15px; }

.btn-circle { 宽度：30px; 高度：30px；文本对齐：居中；填充：6px 0；字体大小：12px；行高：1.428571429；边框半径：15px；}

   > this my .scss  file, in the scss i have just a couple lines but the .js is not modified<

Can you help?

标签： bootstrap-4ruby-on-rails-5

解决方案

推荐阅读