如何使用引导程序在一行中制作标题和搜索框答案

【问题标题】：how to make header and search box in one row with bootstrap如何使用引导程序在一行中制作标题和搜索框
【发布时间】：2017-02-18 10:58:33
【问题描述】：

 <div class="container">
        <div class="row">
        <div class="col-sm-6">``
        <h2>Google</h2>
        </div>
      <div class="col-sm-6">
    <div class="input-group pull-left">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <form action="#" class="form-horizontal">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="name">Input 1</label>
                    <div class="col-sm-9">
                      <input class="form-control" id="name" name="input1" type="text" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="name">Input2</label>
                    <div class="col-sm-9">
                      <input class="form-control" id="name" name="input2" type="text" />
                    </div>
                  </div>
                </div>
              </div>
              <p>
                <input class="btn action-button pull-right" name="commit" type="submit" value="Save">
              </p>
            </form>
          </li>
        </ul>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： css angular-ui-bootstrap

【解决方案1】：

将 h2 类而不是 <h2> 添加到您的 div。你也可以用col-xs-*代替col-sm-*。

 <div class="container">
        <div class="row">
        <div class="col-xs-2 h2">Google</div>
      <div class="col-xs-10">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <form action="#" class="form-horizontal">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="name">Input 1</label>
                    <div class="col-sm-9">
                      <input class="form-control" id="name" name="input1" type="text" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="name">Input2</label>
                    <div class="col-sm-9">
                      <input class="form-control" id="name" name="input2" type="text" />
                    </div>
                  </div>
                </div>
              </div>
              <p>
                <input class="btn action-button pull-right" name="commit" type="submit" value="Save">
              </p>
            </form>
          </li>
        </ul>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </div>
    </div>
  </div>
</div>

【讨论】：