问题:调整页面大小时,搜索框不会更改大小。我还需要扩大它的宽度,但是我似乎真的不知道该怎么做,我曾尝试在盒子中添加例如width:100%;等样式。似乎没什么用
此外,在下面的链接中,您可以看到右侧的选择下拉框已被略微剪掉。我不知道是什么原因造成的,所以我不知道如何解决它。
我还需要使表格填充行的宽度。任何帮助将不胜感激。谢谢!
Image of Form
How i want it too look
码:
<header>
<div class="container">
<form action="search.php" method="get" data-toggle="validator" role="form" class="form-inline">
<div class="row">
<h2>Enter a username and choose a category to search in</h2>
<div class="input-group">
<div class="form-group">
<input name="search" type="text" class="form-control" aria-label="..." placeholder="Search a username here" required>
</div>
</div>
<div class="input-group">
<div class="form-group">
<select class="selectpicker form-control" required>
<option value="">Catagory</option>
<option value="volvo">Minecraft username</option>
<option value="saab">Minecraft UUID</option>
<option value="mercedes">Mc-Market username</option>
<option value="audi">Skype username</option>
</select>
<button type="submit" class="btn btn-default">Search</button>
</div><!-- /form-group -->
</div><!-- /input-group -->
</div> <!-- /row-group -->
</form><!-- /form-group -->
</div><!-- /container-group -->
</header>
最佳答案
不要与其他成分混合
不要将表单组或网格列类直接与输入组混合。而是嵌套输入
组在表单组或与网格相关的元素内。
请参见input-groups docs。 Input-group
应该嵌套在form-group
中,并且您尚未完全为按钮应用正确的标记。它应该在<span class="input-group-btn">
之内。
注意:从文档中,
避免在此处使用<select>
元素,因为它们在WebKit浏览器中无法完全样式化。
工作示例:使用FullPage打开
header {
background-color: #42f4c2;
padding: 100px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container text-center">
<h2>Enter a username and choose a category to search in</h2>
<form action="search.php" method="get" data-toggle="validator" role="form" class="form-inline">
<div class="form-group">
<input name="search" type="text" class="form-control" aria-label="..." placeholder="Search a username here" required>
</div>
<div class="form-group">
<div class="input-group">
<select class="selectpicker form-control" required>
<option value="">Catagory</option>
<option value="volvo">Minecraft username</option>
<option value="saab">Minecraft UUID</option>
<option value="mercedes">Mc-Market username</option>
<option value="audi">Skype username</option>
</select>
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-search">Search</button>
</span>
</div>
</div>
</form>
</div>
</header>