问题:调整页面大小时,搜索框不会更改大小。我还需要扩大它的宽度,但是我似乎真的不知道该怎么做,我曾尝试在盒子中添加例如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 docsInput-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>

10-07 19:06
查看更多