如何調整搜索建議字段在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導航欄中搜索輸入字段下方

回答

相關問題