Question

问题：调整页面大小时，搜索框不会更改大小。我还需要让它更宽，但我真的不知道怎么做，我尝试在框中添加样式，例如 width：100％; 似乎没有任何作用

此外，您可以在下面链接的图像中看到，选择下拉框在右侧略微剪裁。我不知道造成这种情况的原因，所以我不知道如何修复它。

我还需要让表单填充行的宽度。 任何帮助都将受到高度赞赏。谢谢！

代码：

<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>

Answer 1

不要与其他组件混合

不要将表单组或网格列类直接与输入组混合使用。相反，嵌套输入   表单组或网格相关元素内的组。

见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>

Bootstrap内联表单搜索栏宽度

1 个答案:

不要与其他组件混合