Bootstrap searchbox pull-right

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>

Bootply链接： LINK 它没有按预期的方式工作。

Answer 1

如果您正在使用网格，则不需要右上课。

至于您的示例，有些文字是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。