Bootstrap 搜索框右拉

Question

我想在另一个容器旁边的右侧有一个搜索框，并带有拉左功能：

<div>
  <div class="pull-left"><span>SOME TEXT</span></div>
  <div class="pull-right">  
        <div class="row">
            <div class="col-xs-6 col-md-4">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" id="txtSearch">
                    <div class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                    </div>
                </div>
            </div>
        </div>
  </div>
</div>

引导链接： LINK 它不能按预期的方式工作。

Answer 1

如果你使用的是网格，则不需要 pull-right 类。

对于您的示例，一些文本给出了col-*-8，而您的搜索栏给出了col-*-4，它将把您的搜索放在右边。

<div class="container">
  <div class="row">

    <div class="col-*-8">
      Some Text
    </div>

    <div class="col-*-4">
      BUTTON
    </div>

  </div>
</div>

Documentation 和video 内容丰富，您可以随时查看Bootstrap Official Grid Documentation。

这里是Solution。