如何使用bootstrap在一行中创建标题和搜索框

Question

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

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