如何响应地更改Bootstrap中.input-group的宽度？

Question

如何更改.input-group的宽度以使其更宽？我尝试设置width: 50%，但在输入字段和按钮之间放置一个空格。

我也尝试直接设置输入字段的宽度，但也失败了。

并将其设置为100％，这也失败了。

如果我将宽度设置为300px或400px，而不是移动设备，则看起来不错。

这是一个Bootply http://www.bootply.com/HGr9b06Q1B

Answer 1

你需要将它包装在bootstraps结构中......比如：

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-4"><!--width is set by this div -->

      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
        </span>
      </div><!-- /input-group -->

    </div>
  </div>
</div>

请参阅this fork of your bootply

哦，尽量不要使用<center>元素，它已被弃用。

Answer 2

我建议最简单的方法是使用样式.form-control，另一种方法是将输入嵌套在<div class='col-sm-3'> </div>

中