twitter-bootstrap - Bootstrap - 具有输入最大宽度的输入组插件

Question

我对输入右侧的输入组插件有问题。
如果您设置输入的最大宽度或宽度，则会出现意外行为:


代码:https://jsfiddle.net/3vzwg942/1/

<div class="input-group">
            <input type="text" style='max-width: 280px;' class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
</div>
<br />
<div class="input-group">
    <input type="text" style='max-width: 280px;' class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
    <span class="input-group-addon" id="basic-addon2">@@example.com</span>
</div>
<br />
<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" style='max-width: 280px;' class="form-control" aria-label="...">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div><!-- /btn-group -->
        </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

是否可以使其与最大宽度一起使用？
谢谢帮助

Answer 1

您可以设置input-group到同一个max-width让他们在一起。

input,
.input-group {
  max-width: 280px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <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">Go!</button>
            </span>

  </div>
  <br />
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">@@example.com</span>

  </div>
  <br />
  <div class="row">
    <div class="col-lg-6">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="..." />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span>

          </button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
          </ul>
        </div>
        <!-- /btn-group -->
      </div>
      <!-- /input-group -->
    </div>
    <!-- /.col-lg-6 -->
  </div>
  <!-- /.row -->
</div>