如何在不扭曲其高度的情况下溢出引导导航栏？

Question

我最近使用jquery-marcopolo 库来使用一些自动完成功能。它自然会扩展导航栏的高度。

这看起来很难看。我希望那些ol 元素溢出导航栏而不改变其高度。有什么办法吗？

script.js

$(document).ready(function(){
    var searchbox = $("#searchbox");

    searchbox.marcoPolo({
        url: "/api/entries/",
        formatItem: function(data, $item) {
            return data.title;
        },
        onSelect: function(data, $item) {
            window.location = "/blog/yazi/"+data.slug;
        }
    });
});

style.css

input.mp_input {
  border: 1px solid #000000;
  font: inherit;
  font-size: 100%;
  margin: 0;
  outline: none;
  padding: 3px;
  width: 250px;
}

/* Ordered list for display results. */
ol.mp_list {
  background-color: #FFFFFF;
  border-left: 1px solid #C0C0C0;
  border-right: 1px solid #C0C0C0;
  overflow: hidden;
  position: relative;
  width: inherit;
  z-index: 99999;
  list-style-type: none;
}

/* Each list item, regardless of success, error, etc. */
ol.mp_list li {
  border-bottom: 1px solid #C0C0C0;
  padding: 4px 4px 5px;
}

/* Each list item from a successful request. */
ol.mp_list li.mp_item {

}

/* Each list item that's selectable. */
ol.mp_list li.mp_selectable {
  cursor: pointer;
}

/* Currently highlighted list item. */
ol.mp_list li.mp_highlighted {
  background-color: #E0E0E0;
}

/* When a request is made that returns zero results. */
ol.mp_list li.mp_no_results {

}

/* When a request is made that doesn't meet the 'minChars' length option. */
ol.mp_list li.mp_min_chars {

}

/* When a request is made that fails during the ajax request. */
ol.mp_list li.mp_error {

}

html

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Menü</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Eray Erdin</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">Anasayfa</a></li>
        <li><a href="{% url 'blog-home' %}">Blog</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ben <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="{% url 'kimdir' %}">Hakkımda</a></li>
            <li><a href="/iletisime-gec">Mesaj Gönder</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Diğer</li>
            <li><a href="/meta">Platform Hakkında</a></li>
          </ul>
        </li>
      </ul>
      <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input id="searchbox" type="text" class="form-control" placeholder="Ara" name="srch-term" data-provide="typeahead" />
        </div>
        </form>
      </div>
    </div><!--/.nav-collapse -->
  </div>
</nav>

---

环境

• jQuery 2.2.3
• jquery-marcopolo 1.8.1

Answer 1

The answer of kabaehr on this post 给了我修复.navbar 的max-height 的想法。当我尝试时，它就像一个魅力。但是，它在更小的设备中取得了突破。

所以我想到了使用 CSS 的媒体查询。感谢 Full Decent 对另一个问题https://stackoverflow.com/a/18850777/2926992（Bootstrap 3 的默认设备大小）的回答，我设法将max-height 设置为.navbar，而不会破坏较小的设备。如下：

@media(min-width:768px){
    .navbar {
        overflow: visible;
        max-height: 60px;
    }
}

Answer 2

很难判断为导航栏设置了哪些 CSS 规则，但您可以尝试使用

overflow: visible; 到导航栏

和/或固定高度