Bootstrap下拉菜单样式不正确

本文介绍了Bootstrap下拉菜单样式不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在处理twitter / bootstrap下拉菜单样式不正确的问题。我正在使用Bootstrap-sass gem在Rails 3中。下拉菜单正常运行，当我单击按钮时下拉，但是没有样式。

I'm having an issue with twitter/bootstrap dropdowns not being styled properly. I'm in Rails 3, using the bootstrap-sass gem. The dropdown functions properly, coming down when I click the button, but doesn't style.

基本上看起来像这样：已损坏

Basically it looks like this: broken

应如下所示：工作

这两个屏幕截图来自于两个月分叉的不同应用从相同的代码库。它们具有相同的自定义CSS样式，其中的任何样式都不会影响下拉菜单，有效的样式仅导入Alert，崩溃，下拉列表，模式和过渡Bootstrap插件，而损坏的插件则使用多合一的Bootstrap。 js。我尝试删除bootstrap.js并仅用那些插件替换它，但问题仍然存在。

These two screenshots were taken of different apps forked about two months ago from the same code base. They have identical custom CSS styling, of which none of it should affect the dropdown, and the working one is only importing the alert, collapse, dropdown, modal, and transition bootstrap plugins while the broken one uses the all-in-one bootstrap.js. I've tried deleting bootstrap.js and replacing it with only those plugins but the problem persists.

下拉菜单也被称为相同方式，即使用局部变量渲染局部

The dropdowns are also called the same way, by rendering a partial with locals.

渲染：

<%= render :partial => 'layouts/dropdown', :locals => { :space => true, :collection => @statuses, :title => "Set Status", :subtitle => "Statuses:", :label => ->s{s}, :value => ->s{"&status=" + s}, :path => set_status_tickets_path, :id => "ticket-status", :type => :note } %>

部分：

<div class="btn-group pull-right toggleCheck" style="display:none;" id='<%= id %>'> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><%= title %><span class="caret"></span></a> <ul class="dropdown-menu" style="right: 0; left: auto;"> <% if type == :search %> <li style="padding:5px 10px;"><input class="drop-search focus-open hold" type='text' placeholder='Search' style="margin:0px;"></li> <% elsif type == :note %> <li style="padding:5px 10px;"><textarea placeholder='Status notes' class="hold focus-open note-box" rows="4" style="margin:0px; resize: none;"></textarea></li> <% end %> <li style="padding:5px 10px; font-weight:700;"><%= subtitle %></li> <div class="choices"> <% collection.each do |c| %> <li><%= link_to (label.(c) + '<span class="comment"></span>').html_safe, '#', :value => value.(c), :path => path, :iden => label.(c).downcase.gsub(/\s/, '-') %></li> <% end %> </div> </ul> </div>

有人能阐明我在这里做错了什么吗？这也是我的第一个问题，因此，如果我做错了什么或没有提供足够的信息，请告诉我。谢谢！

Can anyone shed some light on what I might be doing wrong here? Also this is my first question, so if I've done something wrong or haven't included enough information let me know. Thanks!

推荐答案

我知道了，问题出在< div class = choices > 。出于某种原因，在一个项目中，它不是从 dropdown-menu 继承样式，而在另一个项目中是。

I figured it out, the problem was with <div class="choices">. For some reason in one project, it wasn't inheriting the style from dropdown-menu, while in the other it was.

选择类由javascript函数使用（用于选择），所以没有摆脱它一个选项。对于一个有点过时的解决方案，我只是添加了 choices 类在适当的位置引导CSS。

The choices class is used by a javascript function (for selection), so getting rid of it wasn't an option. For a somewhat janky solution, I simply added the choices class to bootstrap's CSS in the appropriate locations.