html - 如何调整 Bootstrap 导航栏中搜索输入字段下方的搜索建议字段的大小

Question

我在通过 CSS 调整 Bootstrap 中搜索建议列表框的大小时遇到​​问题。

我在 Bootstrap 导航栏中使用输入(搜索)字段。但是我在调​​整输入(搜索)字段下方的搜索建议框时遇到了困难。

示例图片:

搜索建议字段的宽度应达到 Submit 按钮。

到目前为止我已经尝试过:

HTML

<form class="navbar-form navbar-left searchBox">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    <ul class="list-group">
        <li class="list-group-item">Raisa Hasan</li>
        <li class="list-group-item">Obaidul Islam</li>
    </ul>
</form>

CSS

.searchBox .list-group{
    z-index: 1;
    position: absolute;
}

Answer 1

试试这个 CSS

利用max-width属性

CSS

.navbar-form{
  position: relative;
  max-width:100%;
}
.navbar-form ul.list-group{
  left: 0;
  right: 0;
  margin:auto;
  max-width:100%;
}

相应的风格

link for reference