我想创建一个看起来像这样的菜单: 我使用此代码进行管理,但是当我去检查手机的响应性时,最终会遇到这样的情况:
<div id = "menu" style = "display: flex; justify-content: center;">
<div class="row">
<div class="input-group">
<span style="color:black" class="input-group-addon">
<select id="selection" onchange="getValues(this.value)">
<option>Choose Category</option>
<option>Notary</option>
<option>Deed Date</option>
<option>Person</option>
<option>Place</option>
<option>Manuscript Reference</option>
<option>Subject</option>
</select>
</span>
<input class="autocomplete"id="search" type="text" class="form-control" name="search" placeholder="Choose a category" style ="max-width:200px;" disabled=true >
<button class="btn btn-default" type="button" id="searchButton" onclick="doSparql(this.value)"><span class="fa fa-search"></span></button>
</div>
</div>
</div>
我想集中显示菜单。有可能吗?此外,为什么选择类别下拉菜单和文本框的高度不同?
答案 0 :(得分:1)
行(.row
)仅用于直接包含列(.col-*
)(而非.input-group
)
样式都输入相同,并且居中应该可以正常工作。
<div id="menu" class="py-4 d-flex justify-content-center">
<div class="row">
<div class="col-sm-auto">
<div class="input-group">
<span style="color:black" class="input-group-addon">
<select id="selection" class="form-control" onchange="getValues(this.value)">
<option>Choose Category</option>
<option>Notary</option>
<option>Deed Date</option>
<option>Person</option>
<option>Place</option>
<option>Manuscript Reference</option>
<option>Subject</option>
</select>
</span>
<input id="search" type="text" class="form-control" name="search" placeholder="Choose a category" style="max-width:200px;" disabled=true>
<button class="btn btn-default" type="button" id="searchButton" onclick="doSparql(this.value)"><span class="fa fa-search"></span></button>
</div>
</div>
</div>
</div>