输入和2个按钮在一行＆amp;输入宽度=自动

Question

我正在尝试制作一个搜索框，旁边有两个按钮（添加和上传），以便在md设备和更大的设备中以单行显示。

正如您在下图所示，如果我使用＆＃34; col-md-auto＆＃34;，搜索框会拉伸很多并将两个按钮推到下面一行。我希望它尽可能地拉伸（宽度：自动），同时将两个按钮保持在同一行。

在较小的设备中，我希望搜索框显示在一行（宽度：100％）中，另外两个按钮显示在另一行中。

这是我一直在玩的代码无济于事：

  <div class="row">
  <div class="col-12 col-md-auto">
    <form class="" action="" method="post">
      <div class="input-group searchbox">
        <input type="text" id="search" name="searchtext" class="form-control" placeholder="Search...">
        <div class="input-group-btn">
          <button type="submit" name="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
        </div>
      </div>
    </form>
  </div>
  <div class="col searchbox">
    <button type="button" name="btn-addtext" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> Add text</button>
    <button type="file" name="btn-upload" class="btn btn-success"><span class="glyphicon glyphicon-upload"></span> Upload text</button>
  </div>

请帮忙！

Answer 1

您正在col-12使用div，这就是它延伸到整行的原因。

试试这个：

<div class="row">
  <div class="col-10 col-sm-10 col-md-auto">
    <form class="" action="" method="post">
      <div class="input-group searchbox">
        <input type="text" id="search" name="searchtext" class="form-control" placeholder="Search...">
        <div class="input-group-btn">
          <button type="submit" name="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
        </div>
      </div>
    </form>
  </div>
  <div class="col-2 col-sm-2 searchbox">
    <button type="button" name="btn-addtext" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> Add text</button>
    <button type="file" name="btn-upload" class="btn btn-success"><span class="glyphicon glyphicon-upload"></span> Upload text</button>
  </div>

Answer 2

您正在将此网格大小设置为此{div} <div class="col-12 col-md-auto">，应该更新，请参阅下面的示例。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="row">
  <div class="col-md-10 col-xs-8 col-md-auto">
    <form class="" action="" method="post">
      <div class="input-group searchbox">
        <input type="text" id="search" name="searchtext" class="form-control" placeholder="Search...">
        <div class="input-group-btn">
          <button type="submit" name="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
        </div>
      </div>
    </form>
  </div>
  <div class="col searchbox">
    <button type="button" name="btn-addtext" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> Add text</button>
    <button type="file" name="btn-upload" class="btn btn-success"><span class="glyphicon glyphicon-upload"></span> Upload text</button>
  </div>