如何调整搜索建议字段在Bootstrap导航栏中搜索输入字段下方

我有问题可以通过CSS在Bootstrap中调整搜索建议列表框的大小。如何调整搜索建议字段在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; 
}

来源

2017-07-31 Raisa Hasan

您是否尝试过使用的容器？或者也有可用的网格系统。这里是bootstraps网格系统上w3学校教程的链接。 https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp – Atlas

尝试这个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

来源

2017-07-31 15:17:59

如何调整搜索建议字段在Bootstrap导航栏中搜索输入字段下方

回答

相关问题