Question

我将Bootstrap 3集成到我的Web应用程序中。我正在尝试从主导航设置样式辅助/下拉菜单，以便项目以内嵌方式显示。 Bootstrap 3类是<ul class="list-inline">（显然是嵌套的），但它不起作用。

我发现Chrome devtools中存在相关的CSS规则，因此它不是缓存问题。正在应用类和规则，并且不会覆盖声明（没有删除线）。标记结构如下：

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="navbar navbar-nav">
    <li class="dropdown open">
      <a class="dropdown-toggle" data-toggle="dropdown" href="/item1">Item 1</a>
      <ul class="dropdown-menu list-inline">
        <li><a href="/item1/subitem1">SubItem 1</a></li>
        <!-- Some more secondary nav <li>'s here... -->
      </ul>
    </li>
    <!-- Some more primary nav <li>'s here... -->
  </ul>
</div>

这里有很多样式规则应用于各种类，因此我只在CSS中粘贴嵌套<ul> ...

.dropdown.open .dropdown-menu {
  margin-top: 3em;
  background-color: #525252;
}
/* I didn't write any of these styles - maybe Bootstrap's? */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  <strike>display: none;</strike>
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  <strike>background-color: blah blah</strike>
  <strike>border: blah blah</strike>
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-clip: padding-box;
}

...和子列表项......

.list-inline > li:first-child {
  padding-left: 0;
}

.list-inline > li {
  display: inline-block;
  <strike>padding-left: 5px;</strike>
  padding-right: 5px;
}

我还尝试手动添加display: inline和inline-block以及float: left，但没有任何效果。如果它是相关的，我使用Sass（SCSS）作为CSS，以及Sass 3.2.3和Bootstrap宝石（这是一个Rails应用程序）。这些样式都使用application.css指令编译成一个大的@import文件。

Bootstrap 3的内联列表类不起作用

0 个答案: